녹아웃 foreach $ parent는 부모 대신 조부모를 나타냅니다.

Question

pager.Pages 객체의 foreach 루프를 반복 할 때 $ data는 self (예상대로)입니다. 그러나 $ parent는 호출기 객체 여야하지만 대신 WaterQualityResultViewModel을 반환합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

ko.applyBindings(wqrvm, $('#dv_waterReports')[0]); 
function WaterQualityResultViewModel() { 
    var self = this; 
    self.searchItem = new SearchItem(); 
    self.items = ko.observableArray([]); 
    self.pager = new Pager(); 
    self.search = function() { 
     $.ajax({ 
      url: 'URL GOES HERE', 
      dataType: 'json', 
      data: { 
       'param': 'value' 
      }, 
      async: false, 
      success: function(data) { 
       if ((data != null) && (data.searchResults !== undefined)) {     
        self.items(mappedItems); 
        self.pager.totalItemCount(data.resultsCount); 
        self.pager.lastPage(data.totalPages); 
       } 
      } 
     }); 
    } 
    self.initFromUrl = function() { 
     var hash = getHash(); 
     self.searchItem.geolocation(new geoLocation(0, 0, '', hash));  
     if (hash.currentpage !== 'undefined') 
      self.pager.currentPage(hash.currentpage); 
     if (hash.pagesize !== 'undefined') 
      self.pager.pageSize(hash.pagesize); 
    }; 
    self.initialize = function() { 
     if (window.location.hash) { 
      self.initFromUrl(); 
      self.search(); 
     } 
    }; 
    self.initialize(); 
} 

function Pager() { 
    var self = this; 
    self.lastPage = ko.observable(1); 
    self.totalItemCount = ko.observable(0); 
    self.currentPage = ko.observable(1); 
    self.pageSize = ko.observable(10); 
    self.pageSlide = 2; 
    self.HasNextPage = ko.computed(function() { 
     return self.currentPage() < self.lastPage(); 
    }); 
    self.HasPrevPage = ko.computed(function() { 
     return self.currentPage() > 1; 
    }); 
    self.FirstItemIndex = ko.computed(function() { 
     return self.pageSize() * (self.currentPage() - 1) + 1; 
    }); 
    self.LastItemIndex = ko.computed(function() { 
     return Math.min(self.FirstItemIndex() + self.pageSize() - 1, self.totalItemCount()); 
    }); 
    self.Pages = ko.computed(function() { 
     //debugger; 
     var pageCount = self.lastPage(); 
     var pageFrom = Math.max(1, self.currentPage() - self.pageSlide); 
     var pageTo = Math.min(pageCount, self.currentPage() + self.pageSlide); 
     pageFrom = Math.max(1, Math.min(pageTo - 2 * self.pageSlide, pageFrom)); 
     pageTo = Math.min(pageCount, Math.max(pageFrom + 2 * self.pageSlide, pageTo)); 

     var result = []; 
     for (var i = pageFrom; i <= pageTo; i++) { 
      result.push(i); 
     } 
     return result; 
    }); 
    self.buildUrl = function() { 
     var locHash = encodeQueryData({ 
      'currentpage': self.currentPage(), 
      'pagesize': self.pageSize() 
     }); 
     return locHash; 
    }; 
} 

다음 템플릿을 반환 :

<!-- ko foreach:pager.Pages --> 
      <pre data-bind="text: 'pager is ' + JSON.stringify(ko.toJS($data))"></pre> 
      <pre data-bind="text: 'parent is: ' + JSON.stringify(ko.toJS($parent))"></pre> 
<!-- /ko --> 

Answer 1

$ 부모는이 가정을하고 있습니다 무엇을 기반으로 호출기 객체

해야 하는가? 전체 HTML을 게시하지 않았기 때문에 OP에서 불명확합니다.

applyBindings (new WaterQualityResultViewModel()); 뷰 모델은 $ parent입니다.

어쩌면 당신은 $ parent가 pager를 참조해야한다고 생각할지도 모른다. 당신이 데이터 바인딩 foreach : pager.Pages이기 때문일 것이다. 이 가정은 올바르지 않습니다. 녹아웃은 사용자가 제공하는 DOM 바인딩 컨텍스트를 인식합니다. 귀하의 자바 스크립트 개체 구조를 인식하지 못합니다.

$ parent는 viewModel 자체를 참조하고 Pages 배열의 각 값을 나타내는 $ 데이터는 정확합니다.