Knockout.js는 (옵션을 선택

Question

는 기본적으로, 내가 무엇을 달성하려고하는 Knockout.js

내보기 코드에서 다른 드롭 다운 메뉴의 값에 따라 드롭 다운을 채울 것입니다와 함께 사용하기 위해 배열을 반환 관찰 계산하기) 분명히 제거 :

  <div data-bind="with: chosenMailData"> 
       <table id="tabl-1234" class="mails"> 
        <thead><tr><th>Destination</th><th>Hotel</th></tr></thead> 
        <tbody data-bind="template: { name: 'iti-template', foreach: objects, afterRender: $root.myPostProcessingLogic }"> 
       </table> 
      </div> 

      <script type="text/html" id="iti-template"> 
       <tr> 
        <td><select class="desti" data-bind="options: $root.destinations, value: destination.name"></select></td> 
        <td><select data-bind="options: $root.generall(), value: $root.generall()"></select></td> 
       </tr> 
      </script> 

내보기 - 모델 (다시 제거 다운) :

  self.destinations=['Kerela', 'Shoghi, Himachal Pradesh', 'Kasauli, Himachal Pradesh']; 

      self.myPostProcessingLogic = function(elements) { 
       this.generall = ko.computed(function() { 
        $('.desti').each(function(i, obj) { 
         stayOptions = []; 
          $.getJSON("http://127.0.0.1:8000/api/hotel?format=json&location__name="+obj.value, function(data) { 
            $.each(data.objects, function(i, item){ 
            stayOptions.push(item.name); 
            }); 
           }); 
        }); 
        return stayOptions; 
       }, this); 
      } 

이 삽입은 this.generall()에 alert() 그쪽을 보여줍니다 t stayOptions에 원하는 값이 입력됩니다. 문제가되는 호텔 열의 해당 행에 대한 선택 옵션에 표시되도록 배열을 가져옵니다.

아마도 나는 정말로 바보 같은 실수를하고 있습니다. 그러나 나는 오랫동안 코드를보고 있었고 아무 것도 떠오르지 않았습니다. 제발 조언.

편집 : 내 뷰 - 모델의 시작 부분에 너무이 일을하고있다 : 메서드를 호출 할 때는

  self.generall = ko.observableArray(); 

Answer 1

의 this 변수가 호출에 할당됩니다.

var f = $root.myPostProcessingLogic; 
f(); // this will not set 'this' to '$root' 

위는 녹아웃이 무엇을하고 있는지 본질적으로, 이것은 this이 myPostProcessingLogic() 내부 뭔가에 바인딩 할 수 있습니다. 범위가 이미 정의 된 self 변수이므로 쉽게 수정할 수 있습니다.

또 다른 문제점은 관찰 가능 항목을 재 할당해도 구독자가 보존되지 않으며 종속 관찰 항목이 업데이트되지 않는다는 것입니다.

self.generall = ko.observableArray(); 
self.myPostProcessingLogic = function(elements) { 
    self.generall.removeAll(); 
    $('.desti').each(function(i, obj) { 
     $.getJSON("http://127.0.0.1:8000/api/hotel?format=json&location__name="+obj.value, function(data) { 
      $.each(data.objects, function(i, item){ 
       self.generall.push(item.name); 
      }); 
     }); 
    }); 
}