observableArray에 변경 사항이있는 UI를 어떻게 자동 업데이트합니까?

Question

안녕하세요 나는 UI가 자동으로 배열 항목이 갱신 또는 삭제 첨가하고 있다고 업데이 트하려는 allJobberDetailsArray에 어떤 변화가 내가 UI를 원하는

var allJobberDetailsArray = []; 
getAllJobberDetailsArray(); 
function getAllJobberDetailsArray() { 
    $(function() { 
     $.ajax({ 
      url: 'http://example.com', 
      type: 'GET', 
      data: { 
       request: "yes", 
       getAllJobberDetailsArray: "yes" 
      }, 
      success: function(data) { 
       allJobberDetailsArray = data; 
      } 
     }); 
    }) 
} 

// ViewModel 
function JobberCheckBoxListUserControlViewModel() { 
    var self = this; 
    self.allJobberDetailsArray = ko.observableArray(allJobberDetailsArray); 
} 
ko.applyBindings(new JobberCheckBoxListUserControlViewModel()); 

knockout.js를 사용하는 다음 코드를 반영해야 .

어떻게하면됩니까?

EDIT 내가 배열을 만들어 위의 코드에서

var allJobberDetailsArray = ko.observableArray(); 

getAllJobberDetailsArray(); 

function getAllJobberDetailsArray() { 
    $(function() { 
     $.ajax({ 
      url: 'http://example.com', 
      type: 'GET', 
      data: { 
       request: "yes", 
       getAllJobberDetailsArray: "yes" 
      }, 
      success: function(data) { 
       allJobberDetailsArray.removeAll(); 
       allJobberDetailsArray.push(data); 
      }, 
     }); 
    }) 
} 

// ViewModel 
function JobberCheckBoxListUserControlViewModel() { 
    var self = this; 
    self.allJobberDetailsArray = allJobberDetailsArray;// allJobberDetailsArray is now observable but any change to this doesn't reflect in the UI 
} 
var viewModel = new JobberCheckBoxListUserControlViewModel(); 
ko.applyBindings(viewModel); 

자체를 관찰하고 배열에 대한 변경은 내가 어떻게 그것을 달성 할있을 경우 자동 업데이트로 UI를 시도?

Answer 1

먼저 업데이트 할 어레이가 관찰 가능 어레이가 아닙니다. 두 번째로 성공 콜백은 실제로 배열을 덮어 씁니다. 마지막으로 observable 배열을 올바르게 업데이트 할 수 없도록 viewModel에 대한 참조를 유지하지 않습니다. ObservableArray는 실제 배열을 래핑하여 관찰 가능하게 만듭니다. 모든 add의 제거 등은 observableArray를 거쳐야 가입자가 통지받을 수 있습니다.

대신 사용해보십시오.

// ViewModel 
function JobberCheckBoxListUserControlViewModel(initialArray) { 
    var self = this; 
    self.allJobberDetailsArray = ko.observableArray(initialArray || []); 
} 

var viewModel = new JobberCheckBoxListUserControlViewModel(); 

function getAllJobberDetailsArray() { 
    $(function() { 
     $.ajax({ 
      url: 'http://example.com', 
      type: 'GET', 
      data: { 
       request: "yes", 
       getAllJobberDetailsArray: "yes" 
      }, 
      success: function(data) { 
       viewModel.allJobberDetailsArray(data); 
      } 
     }); 
    }) 
} 

ko.applyBindings(viewModel); 

나는 또한 글로벌 네임 스페이스를 polute 및 캡슐화를 유지하지 않습니다 귀하의 ViewModel 내부의 getAllJobberDetailsArray 방법을 넣어 리팩토링을 추천 할 것입니다.

희망이 도움이됩니다.