[javascript] Knockout.js에서 관찰 가능한 바인딩을 지우거나 제거하는 방법은 무엇입니까?

녹아웃이 제공하는 with binding을 사용해 볼 수 있습니다.
http://knockoutjs.com/documentation/with-binding.html
적용 바인딩을 한 번 사용하고 데이터가 변경 될 때마다 모델을 업데이트하는 것이 아이디어입니다.

최상위 뷰 모델 storeViewModel, cartViewModel로 표시되는 카트 및 해당 카트의 항목 목록 (예 : cartItemsViewModel)이 있다고 가정 해 보겠습니다.

최상위 모델 인 storeViewModel을 전체 페이지에 바인딩합니다. 그런 다음 카트 또는 카트 항목을 담당하는 페이지 부분을 분리 할 수 ​​있습니다.

cartItemsViewModel에 다음 구조가 있다고 가정합니다.

var actualCartItemsModel = { CartItems: [
  { ItemName: "FirstItem", Price: 12 },
  { ItemName: "SecondItem", Price: 10 }
] }

cartItemsViewModel은 처음에 비어있을 수 있습니다.

단계는 다음과 같습니다.

1. html로 바인딩을 정의하십시오. cartItemsViewModel 바인딩을 분리합니다.

     
       <div data-bind="with: cartItemsViewModel">
         <div data-bind="foreach: CartItems">
           <span data-bind="text: ItemName"></span>
           <span data-bind="text: Price"></span>
         </div>
       </div>
     
   

2. 상점 모델은 서버에서 가져옵니다 (또는 다른 방법으로 생성됨).

   var storeViewModel = ko.mapping.fromJS(modelFromServer)

3. 최상위 뷰 모델에서 빈 모델을 정의합니다. 그런 다음 해당 모델의 구조를 실제 데이터로 업데이트 할 수 있습니다.

     
       storeViewModel.cartItemsViewModel = ko.observable();
       storeViewModel.cartViewModel = ko.observable();
    
   

4. 최상위 뷰 모델을 바인딩합니다.

   ko.applyBindings(storeViewModel);

5. cartItemsViewModel 개체를 사용할 수 있으면 이전에 정의한 자리 표시 자에 할당합니다.

   storeViewModel.cartItemsViewModel(actualCartItemsModel);

장바구니 항목을 지우려면 :
storeViewModel.cartItemsViewModel(null);

Knockout은 html을 처리합니다. 즉, 모델이 비어 있지 않을 때 나타나고 div의 내용 ( “바인딩 포함”이있는 내용)이 사라집니다.

답변

<ul data-bind="template: { name: 'template', foreach: Events }"></ul>

<script id="template" type="text/html">
    <li><span data-bind="text: Name"></span></li>
</script>

var myLiveData = ko.observableArray();

$.getJSON("http://foo.bar/data.json?callback=?", function(data) {
    myLiveData.removeAll();
    /* parse the JSON data however you want, get it into myLiveData, as below */
    myLiveData.push(data[0].foo);
    myLiveData.push(data[4].bar);
});

function MyViewModel() {
    var self = this;
    self.myData = myLiveData;
};
ko.applyBindings(new MyViewModel());