KnockoutJS - Обновление свойств наблюдаемого массива, состояние родителя должно быть изменено

Question

Я хотел бы изменить массив свойства person «father», а затем статус родителя должен быть изменен, но он не работает. Я использовал ko.computed update «отец свойства человека», тогда «статус» родителя должен быть изменен как «true».

что я делаю неправильно?

<ul data-bind="foreach:vm"> 
     <li> 
      <input type="text" data-bind="value:name" /> 
      <input type="text" data-bind="value:age" /> 
      <input type="text" data-bind="value:status" /> 
      <!-- ko foreach:person--> 
       <input type="text" data-bind="value:father" /> 
      <!-- /ko --> 
     </li> 
    </ul> 

<script type="text/javascript"> 
    var ps = [{"name":"gsh","status":false,"age":12,"person":[{"father":"a"},{"father":"b"}]},{"name":"zx","status":false,"age":"22","person":[{"father":"c"},{"father":"d"}]}]; 

    function Person(p){ 
     this.father=ko.observable(p.father); 
    } 

    function Pros(p){ 
     this.name = ko.observable(p.name); 
     this.age = ko.observable(p.age);  
     this.person = ko.utils.arrayMap(p.person,function(pe){ 
      return new Person(pe); 
     });  
     this.status = ko.observable(p.status); 
     this.status = ko.computed(function(){ 
      ko.utils.arrayForEach(this.person,function(pe){ 
       pe.father();  
      }); 

      return true; 
     },this); 
    } 
    var vm = ko.utils.arrayMap(ps,function(p){ 
     return new Pros(p); 
    }); 
    var VModel = ko.observableArray(vm); 

    ko.applyBindings(VModel); 
</script> 

Answer 1

Я вижу три проблем: во-первых, вы перезапись status атрибута:

this.status = ko.observable(p.status); 
this.status = ko.computed(function(){}); 

Это не только не иметь желаемый эффект, но перезапись наблюдаемых довольно рискованно, так как это приводит к которые нелегко отследить. Например, если вы привяжете <input> к наблюдаемой и более поздней перезаписи, которая будет наблюдаться с чем-то другим, привязка будет молча прекращать работу.

Также ko.utils.arrayMap возвращает обычный массив, а не ko.observableArray. Это означает, что this.person не наблюдается, и ваш computed, который выполняет итерации по нему, не заметит, добавляются ли элементы или удаляются на него. Это может работать в вашем случае, если вы правильно это сделаете и не добавляете и не удаляете что-либо, но это то, что нужно иметь в виду.

Третий вопрос заключается в том, что ваш computed также, вероятно, не делать то, что вы хотите, чтобы:

this.status = ko.computed(function(){ 
    ko.utils.arrayForEach(this.person,function(pe){ 
    pe.father();  
    }); 

    return true; 
},this); 

Это перебирает все лицо, отбрасывает результат, а затем всегда возвращает истину.

Все вместе, я хотел бы попытаться переписать код так:

var ps = [{"name":"gsh","status":false,"age":12,"person":[{"father":"a"},{"father":"b"}]},{"name":"zx","status":false,"age":"22","person":[{"father":"c"},{"father":"d"}]}]; 

function Person(p){ 
    this.father=ko.observable(p.father); 
} 

function Pros(p){ 
    this.name = ko.observable(p.name); 
    this.age = ko.observable(p.age); 
    this.person = ko.observableArray([]); 

    ko.utils.arrayForEach(p.person, function(pe){ 
     this.person.push(new Person(pe)); 
    }, this); 

    this.status = ko.computed(function(){ 
     var allTrue = true; 

     ko.utils.arrayForEach(this.person(), function(pe){ 
      if (!pe.father()) { 
       allTrue = false; 
      } 
     }); 

     return allTrue; 
    },this); 
} 

var vm = ko.utils.arrayMap(ps,function(p){ 
    return new Pros(p); 
}); 

var VModel = ko.observableArray(vm); 

Если вам не нужна поддержка Internet Explorer старше 9, ваш status вычислен можно записать более кратко с помощью Array.every :

this.status = ko.computed(function(){ 
    return this.person().every(function(p) { 
    return p.father(); 
    }); 
}, this);