Question

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

我尝试在点击按钮"list_of_abc"时将新的abc（）对象添加到observableArray "ADD To List of abc"并显示最近添加的对象的属性（member_A和member_B ）在input框中。我的代码确实向observableArray "list_of_abc"添加了新的abc（）对象，但我无法在"member_A" "member_B"框中显示新添加的对象的成员（input和HTML） {1}}。

视图模型

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

我希望 访问和修改 特定的abc对象形式list_of_abc observableArray，我怎么能用给定的数字作为observableArray索引呢。

所以有没有办法直接通过使用索引来访问observableArray的元素，而不是通过将foreach放在observableArray上来遍历整个数组。

感谢。

Answer 1

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

我添加了foreach - 绑定的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

1 个答案: