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

Question

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

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

View 模型

     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

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

我添加了一个 foreach 绑定(bind)的 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>