访问可观察数组中可观察对象的属性 - knockout.js

Question

一直在学习淘汰赛并获得乐趣，但我被困在我认为非常简单的事情上：访问可观察数组中可观察对象的属性。 我需要从 activeCompMultipliers 数组中的 activeCompMultiplier 对象中获取“multiplierValue”。

这是我所有的相关代码：

首先，创建并推入数组的对象。这就是我想与之交谈的内容：

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

这是包含可观察对象的可观察数组：

self.activeCompMultipliers = ko.observableArray();

这是创建一个新对象并将其推入数组的行：

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

最后，当输入字段触发“更改”事件时，这就是所谓的。我正在使用 alert() 来调试问题：

self.inputChanged = function (rowIndex) {

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

这里是我的相关 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>

我认为这是一个语法问题，因为 JS 不是我最擅长的语言，但我已经使用括号进行了三次检查以解开 KO 可观察对象，所以这可能是一个范围问题？

我所有的 JS 都在 function ViewModel() {...} 函数中，然后通过 ko.applyBindings(new ViewModel()); 绑定

作为一个长期潜伏者，我感谢任何帮助。 :)

Answer 1

3 分：

1. 你不是在循环activeCompMultipliers，而是使用activeParts的$index()来访问它，这是否意味着这两个数组具有相同的大小并且是链接的？

2. 如果index() 正确，则该值绑定到activeCompMultiplier 实例，它应该绑定到其multiplierValue 字段：

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

3. 更改事件绑定到inputChanged，您将其范围更改为self，但此时self 是什么？并且它没有用，因为该函数已经引用了正确的self。应该是：

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

   或至少：

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