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

Question

为什么我只能访问HTML的<input>的observableArray元素的一个（即'member_A'）属性。

我想按钮"ADD To List of abc"的点击添加新的ABC（）对象为observableArray "list_of_abc"并显示最近添加对象的属性（即是member_A和member_B）在input盒。 我的代码确实将新的abc（）对象添加到observableArray "list_of_abc"，但我无法在HTML的input框中显示新添加的对象的成员（即"member_A"和"member_B"）。

视图模型

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

HTML

<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' X。 第二个输入框为空白。 此外，我必须点击“添加到abc列表”按钮两次以获取member_A在输入框中显示。

我想访问和修改特定对象ABC形式list_of_abc observableArray，我怎么能做到这一点与给定的数字作为observableArray指数。

那么有什么办法直接通过使用它们的索引来访问observableArray的元素，而不是通过将foreach放在observableArray上来循环整个数组。

谢谢。

Answer 1

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

我加了一个foreach -bound div，所以你可以看到列表中有什么。我还更改了变量名称以符合JavaScript命名约定，并将构造函数更改为普通的对象返回函数。

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

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 /> 
 
    <!-- ko if: list().length-1 >= editIndex() -->Editing <span data-bind="text:editIndex"></span> 
 

 
    <input data-bind="value: list()[editIndex()].member_A" /> 
 
    <input data-bind="value: list()[editIndex()].member_B" /> 
 
    <!-- /ko --> 
 
</div>