在可观察数组内访问可观察对象的属性-kickout.js

Question

Been learning knockout and having fun, but I'm stuck on something that I assume is so simple: accessing the properties of an observable object inside an observable array. I need to get the "multiplierValue" from the activeCompMultiplier object inside the activeCompMultipliers array.

Here's all my relevant code:

First off, the object that is created and pushed into the array. This is what I'm trying to talk to:

var activeCompMultiplier = function (multiplierValue) {
    this.multiplierValue = ko.observable(multiplierValue);
}

And this is the observable array that contains the observable objects:

self.activeCompMultipliers = ko.observableArray();

Here's the line that creates a new object and pushes it into the array:

self.activeCompMultipliers.push(new activeCompMultiplier(1));

And finally, when the input field triggers a 'change' event, this is what is called. I'm using an alert() to debug the issue:

self.inputChanged = function (rowIndex) {

    alert("Multiplier is: " + self.activeCompMultipliers()[rowIndex].multiplierValue() + "\n At index: " + rowIndex);
}

Annnnd here my related HTML:

<tbody data-bind="foreach: activeParts">
                <tr>
                    <td class="ShoppingEntry" data-bind="text: $data"></td>
                    <td class="Textbox" >
                        <input type="number" class="TextBoxInput"
                          data-bind="value: $root.activeCompMultipliers()[$index()], 
                                     event: { change: inputChanged.bind(self, $index())},
                                     attr: {id: 'Textbox' + $index()}" /></td>     
                    <td class="DeleteCell">
                        <input type="image" src="/Assets/list_remove.png" class="DeleteButtonInput" data-bind="click: deactivatePart"/></td>
                </tr>
</tbody>

I assume its a syntactical issue as JS isn't my strongest language, but I've triple-checked using parenthesis to un-wrap KO observables, so maybe it's a scope issue?

All of my JS is within a function ViewModel() {...} function, that is then bound via ko.applyBindings(new ViewModel());

As a long-time lurker, I appreciate any help. :)

Answer 1

3 points:

1. You're not looping over activeCompMultipliers but using the $index() of activeParts to access it, does this mean these 2 arrays have the same size and are linked?

2. If the index() is correct, the value is bound to an activeCompMultiplier instance, it should be bound to its multiplierValue field:

    <input type="number" class="TextBoxInput" data-bind="value: $root.activeCompMultipliers()[$index()].multiplierValue, 

3. The change event is bound to inputChanged which you changed its scope to self , but what is self at that point? and its useless as that function already references the right self . Should be:

    event: { change: function() { inputChanged($index()); } } 

   or at least:

    event: { change: inputChanged.bind(null, $index()) }