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

时间:2014-09-21 04:55:14

标签: javascript html knockout.js

一直在学习淘汰赛并获得乐趣,但是我坚持认为这么简单:在可观察数组中访问可观察对象的属性。 我需要获得" multiplierValue"来自activeCompMultipliers数组中的activeCompMultiplier对象。

这是我的所有相关代码:

首先,创建并推入数组的对象。这就是我试图与之交谈的内容:

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);
}

Annnnd在这里我的相关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());绑定

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

1 个答案:

答案 0 :(得分:0)

3分:

  1. 您没有循环activeCompMultipliers但使用$index() activeParts来访问它,这是否意味着这两个数组具有相同的大小并且已链接

  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()) }