如何在不使用foreach的情况下访问动态更新的knockout observableArray中的特定元素

为什么我只能访问一个具有<input>的HTML的observableArray's Element的一个属性(即'member_A')

我试图添加新的abc()对象到observableArray "list_of_abc"上点击按钮"ADD To List of abc"，并在input框中显示最近添加的对象的属性(即member_A和member_B)。我的代码确实添加了新的abc()对象到observableArray "list_of_abc"，但我无法在HTML的input框中显示新添加的对象的成员(即"member_A"和"member_B")。

ViewModel

     function abc(var1,var2)
    {
        this.member_A = ko.observable(var1);
        this.member_B = ko.observable(var2);
    }
    function Home()
    {
        this.list_of_abc = ko.observableArray();
        this.last_added_index = ko.observable();
        this.addTolist_of_abc = function()
                                {
                                    var len = this.list_of_abc().length;
                                    this.last_added_index(len);
                                    this.list_of_abc.push(new abc("Element"+len,len));      
                                };
    }
    ko.applyBindings(new Home());

 <div>
            <button data-bind = "click: addTolist_of_abc">ADD To list_of_abc</button>
    </div>
<p>Last Added abc's object</p> <br>
member_A's value:  <input data-bind="value: list_of_abc()[$root.last_added_index()].member_A" />  <br>     
 member_B's value:   <input data-bind="value: list_of_abc()[$root.last_added_index()].member_B" />

http://jsfiddle.net/himanshudhiman/3r0g0wak/1/

在输出中，我只在输入框中获得第一个变量'member_A'。第二个输入框为空。此外，我必须点击"ADD to List of abc"按钮两次，才能在输入框中显示member_A。

我希望访问和修改一个特定的abc对象list_of_abc observableArray，我怎么能做到这一点与给定的数字作为observableArray索引。

那么是否有任何方法可以直接访问observableArray的元素，而不是通过在observableArray上放置foreach来循环遍历整个数组呢?

谢谢。

您想让代码做什么并不完全清楚，所以我猜您希望能够将新项输入到列表中。考虑到这一点，我向视图模型添加了一个newItem成员，并将其成员绑定到输入框。addToList方法将这些值复制到保存项的新元素中。

我添加了一个foreach绑定的div，这样你就可以看到列表中的内容。我还更改了变量名以符合JavaScript命名约定，并将构造函数更改为普通的对象返回函数。

Update:我添加了一个section，允许您通过选择其索引来编辑现有行。您仍然可以添加新元素，并且索引列表将相应地进行调整。

function abc(var1, var2) { var self = { member_A: ko.observable(var1), member_B: ko.observable(var2) }; return self; } function homeModel() { var self = { list: ko.observableArray([ abc('one', '1'), abc('two', '2') ]), newItem: abc('', ''), lastAdded: ko.observable(), addToList: function(item) { self.lastAdded(self.list().length); self.list.push(abc(self.newItem.member_A(), self.newItem.member_B())); }, editIndex: ko.observable(), listIndex: ko.computed({ read: function() { var result = [], len = self.list().length; for (var i = 0; i < len; ++i) { result.push(i); } return result; }, deferEvaluation: true }) }; return self; } ko.applyBindings(homeModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div> <button data-bind="click: addToList">ADD To List ofabc</button> </div> <input data-bind="value: newItem.member_A" /> <input data-bind="value: newItem.member_B" /> <div data-bind="foreach:list"> <span data-bind="text:member_A"></span>, <span data-bind="text:member_B"></span> <br /> </div> <div>Index: <select data-bind="options:listIndex, value:editIndex"></select> <br /> Editing <span data-bind="text:editIndex"></span> <input data-bind="value: list()[editIndex()].member_A" /> <input data-bind="value: list()[editIndex()].member_B" />  </div>

相关内容

最新更新

热门标签：