在函数内部访问时,长度为ObserveableArray

时间:2013-10-07 15:26:05

标签: knockout.js ko.observablearray

我有一个附加了一些函数(方法)的模型类。当我查看函数外部的可观察数组的长度时,正确返回长度。但是当我在模型类的函数内部查看observablearray时,它总是返回0.但是如果我通过函数内部的索引访问observablearray中的一个项目,它将返回正确的项目。为什么长度总是0?

    function ModelView(data) {
      var self = this;


      self.items= ko.observableArray(data.items);
      var test = self.items().length; //shows correct number
      self.EditRule = function (product) {
        for(var i=0; i<self.items().length; i++)
              //dosuff but self.items().length is always 0


      }
    }

我找到了一个解决办法,在viewmodel中添加了一个额外的属性,如下所示:

     self.itemslength = ko.observable(self.items().length);

显然我的实际问题要复杂得多,但是循环是将项目与传入的参数进行比较以确保某些事情是有效的。 self.items基本上是一个主列表。

1 个答案:

答案 0 :(得分:1)

尝试使用ko.utils.arrayForEach迭代observableArray:

function ModelView(data) {
      var self = this;
      self.items = ko.observableArray(data.items);
      var test = self.items().length; //shows correct number
      self.EditRule = function () {
          ko.utils.arrayForEach(self.items(), function(item){
              if (item.name === "2"){
                  // For example
                  console.log(self.items().length); //will be 3
                  self.items.remove(item);
                  console.log(self.items().length); //will be 2
              }
          });
      }
 }

var myData = {
    items : [{id: 0, name: "0"},{ id: 1, name: "1"}, {id: 2, name: "2"}]
}

var myModelView = new ModelView(myData);
ko.applyBindings(myModelView);

我测试了这个html:

<ul data-bind="foreach: items">
    <li data-bind="text: name"></li>
</ul>
<a href="#" data-bind="click: EditRule">EditRule</a>

如果您愿意,也可以使用vanilla for循环:它与您自己的尝试非常相似,但您可能在其他地方出错。

function ModelView(data) {
      var self = this;
      self.items = ko.observableArray(data.items);
      var test = self.items().length; //shows correct number
      self.EditRule = function () {
          for(var i =0; i < self.items().length; i++){
              if (self.items()[i].name === "2"){
                  // For example
                  console.log(self.items().length); //will be 3
                  self.items.remove(self.items()[i]);
                  console.log(self.items().length); //will be 2
              }
          }
      }
 }