new keyword in foreach binding throws error

Martlark commented 5 years ago

I have a foreach binding that builds an array using the page count so I can enumerate using the new array. tko throws an error on the new keyword.

<script src="https://cdn.jsdelivr.net/npm/@tko/build.reference@4.0.0-alpha8/dist/build.reference.min.js"></script>
..
..
..
                        <span data-bind="foreach: new Array(eventPageCount())">
                            <a class="pageLink"
                               data-bind="css: $parent.eventPageClass($index()),
                                 text: $index,
                                 click: $root.clickEventPage.bind($root, $index(), $parent)">

                            </a>
                        </span>

Error

bind.js:138 Uncaught Error: Unable to process binding "foreach" in binding "foreach"
Message: The variable "new" was not found on $data, $context, or globals.
    at Rt.lookup (bind.js:138)
    at e.get_value (utils.parser.js:377)
    at e.get_leaf_value (utils.parser.js:180)
    at e.get_value (utils.parser.js:199)
    at e.get_value (utils.parser.js:278)
    at Function.e.value_of (utils.parser.js:222)
    at utils.parser.js:1171
    at t.valueAccessor (bind.js:807)
    at t.get [as value] (bind.js:329)
    at new t (binding.foreach.js:116)
lookup @ bind.js:138
e.get_value @ utils.parser.js:377
e.get_leaf_value @ utils.parser.js:180
e.get_value @ utils.parser.js:199
e.get_value @ utils.parser.js:278
e.value_of @ utils.parser.js:222
(anonymous) @ utils.parser.js:1171
valueAccessor @ bind.js:807
get @ bind.js:329
t @ binding.foreach.js:116
(anonymous) @ bind.js:797
ze @ observable.js:125
f @ bind.js:796
on @ bind.js:836
tn @ bind.js:616
Zt @ bind.js:597
tn @ bind.js:625
Zt @ bind.js:597
tn @ bind.js:625
Zt @ bind.js:597
tn @ bind.js:625
Zt @ bind.js:597
ln @ bind.js:898
t.added @ binding.foreach.js:334
(anonymous) @ binding.foreach.js:238
o @ utils.js:52
t.processQueue @ binding.foreach.js:234
(anonymous) @ binding.foreach.js:212
requestAnimationFrame (async)
t.onArrayChange @ binding.foreach.js:212
la.notifySubscribers @ observable.js:331
e.notifySubscribers @ observable.js:603
(anonymous) @ observable.js:622
la.notifySubscribers @ observable.js:331
e.notifySubscribers @ observable.js:603
valueHasMutated @ observable.js:449
pt.fn.(anonymous function) @ observable.js:811
(anonymous) @ pageLive-1554523935.3255415.js:294
init @ pageLive-1554523935.3255415.js:289
async function (async)
init @ pageLive-1554523935.3255415.js:284
(anonymous) @ pageLive-1554523935.3255415.js:311

maskmaster commented 5 years ago

Move the new to the viewmodel. Currently you create part of the viewmodel in the view.

Martlark commented 5 years ago

I moved the new to the viewmodel as a computed. The bind parser on tko is not as flexible as legacy knockout.

mbest commented 5 years ago

Perhaps you would prefer to use the repeat binding: https://github.com/mbest/knockout-repeat

Martlark commented 5 years ago

Sounds like a worthy addition to tko.

knockout / tko

new keyword in foreach binding throws error #97

Error