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

Question

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

我正在尝试通过单击按钮 "ADD To List of abc" 将新的 abc() 对象添加到 observableArray "list_of_abc" 中，并显示最近添加的对象的属性（即 member_A 和 member_B) 在 input 框中。我的代码确实将新的 abc() 对象添加到 observableArray "list_of_abc" 但我无法在 input 框中显示新添加的对象的成员（即 "member_A" 和 "member_B"）HTML.

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

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'。第二个输入框为空白。此外，我必须单击 "ADD To List of 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>

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

How to access a particular element of dynamically updated knockout observableArray without using foreach

html

javascript

knockout.js

knockout-mvc