녹아웃 바인딩

Question

배열을 제거했지만 UI 서식을 지정할 항목 수를 세고 있습니다. 바인딩 업데이트를 할 수 있어야합니다.

ko.applyBindings(viewModel); 
    getFoos(); 


var viewModel = { 
    foos: ko.observableArray([]), 

    reloadFoos: function() { 
     getFoos(); 
    }, 

    removeFoo: function() { 
     remove(this); 
    } 
}; 

var foo = function() { 
    this.Id = ko.observable(); 
    this.Name = ko.observable(); 
    this.Count = ko.observable(); 
}; 

function remove(foo) { 
    viewModel.foos.splice(viewModel.foos.indexOf(foo), 1); 

    viewModel.foos.each(function(index) { 
     viewModel.foos[index].Count = index%10 == 0; 
    }); 
} 

function getFoos() { 
    viewModel.foos([]); 
    $.get("/myroute/", "", function (data) { 

     for (var i = 0; i < data.length; i++) { 
      var f = new foo(); 
      f.Id = data[i]; 
      f.Name = data[i]; 
      f.Count = i%10 == 0; 
      viewModel.foos.push(f); 
     } 

    }); 
} 

      <div data-bind="foreach: foos"> 
       <div style="float: left"> 
         <a href="javascript:void(0);" data-bind="click : $parent.removeFoo, attr: { id: Id }"> 
          <label data-bind="value: Name"></label> 
         </a> 
       </div> 
       <!-- ko if: Count --> 
       <div style="clear: left"></div> 
       <!-- /ko --> 
      </div> 

클릭 이벤트가 발생하면 항목이 배열에서 제거되지만 if 바인드가 업데이트되지 않고 ui 서식이 해제됩니다. ui 블록을 제거하고 다시로드 할 때 ui 블록이 튀어서 데이터를 다시로드하지 못하게하려고합니다.

Answer 1

Count으로 할당 할 때 관측 가능으로 지정하지 않으므로 UI가 업데이트되지 않습니다. 관측 대상을 직선 부울 값으로 대체합니다.

viewModel.foos[index].Count = index%10 == 0; 

가 viewModel.foos[index].Count는 관찰에 저장되지 않습니다 true 또는 false 및 값과 동일하게됩니다 : 그래서, 당신의 할당은 하나 같이 호출합니다.

라인이 대신해야한다는 : 올바르게 관찰을 설정합니다

viewModel.foos[index].Count(index%10 == 0); 

. 이 방법으로 설정하려면 관찰 대상으로 모든 과제를 변경해야합니다. 이 페이지의 "Observables 읽기 및 쓰기"섹션을 참조하십시오 : Knockout Observables.