Нокаут Еогеасп dosn't работа для модели

Question

Привет У меня есть следующий код:

<div class="dropdownSelector" data-bind="visible: modelSelectorD.isActive()"> 
    <i></i> 
    <input type="text" data-bind="value: modelSelectorD.searchText, valueUpdate: 'afterkeydown'" class="txt block searchField" /> 
    <ul data-bind="foreach: modelSelectorD.visibleData"> 
     <li data-bind="click: modelSelectorD.doSwitch"><a data-bind="html: modelSelectorD.getName($data,$element)"></a></li>   
    </ul> 
    <span data-bind="visible:modelSelectorD.showMoreLink, text:modelSelectorD.showMoreText"></span><br/>  
    <a href="#" class="close" data-bind="click: modelSelectorD.close">Close</a> 
</div> 


<div class="dropdownSelector" data-bind="visible: modelSelectorC.isActive()"> 
    <i></i> 
    <input type="text" data-bind="value: modelSelectorC.searchText, valueUpdate: 'afterkeydown'" class="txt block searchField" /> 
    <ul data-bind="foreach: modelSelectorC.visibleData"> 
     <li data-bind="click: modelSelectorC.doSwitch"><a data-bind="html: modelSelectorC.getName($data,$element)"></a></li>   
    </ul> 
    <span data-bind="visible:modelSelectorC.showMoreLink, text:modelSelectorC.showMoreText"></span><br/>  
    <a href="#" class="close" data-bind="click: modelSelectorC.close">Close</a> 
</div> 

<script type="text/javascript"> 
    var obj = { id: 0, name: "not selected" }; 
    function selector(maxcount, serviceGet, serviceChange) { 
     var self = this; 
     self.isActive = ko.observable(false); 
     self.maxcount = ko.observable(maxcount); 
     self.serviceUrlGet = serviceGet; 
     self.serviceUrlChange = serviceChange; 
     self.searchText = ko.observable(""); 
     self.selectedItem = ko.observable(obj); 
     self.allObjects = ko.observableArray([]); 
     self.visibleData = ko.observableArray([]); 
     self.showMoreLink = ko.computed(function() { 
      return self.allObjects().length > self.maxcount(); 
     } 
     ); 

     self.showMoreText = ko.computed(function() { 
      return "... (" + self.allObjects().length + ")"; 
     } 
     ); 

     self.getName = function (data, element) { 
      if (data) { 
       var html = "<i>" + data.id + "</i> " + data.name; 
       return html; 
      } 
      return ""; 
     }; 
     self.doSwitch = function (data) { 
      self.selectedItem(data); 
      self.close(); 
     }; 

     self.close = function() { 
      self.isActive(false); 
     }; 

     self.show = function() { 
      self.isActive(true); 
     }; 

     self.searchText.subscribe(function (newValue) { 
      self.getData(newValue); 
     }); 

     self.getData = function (searchText) { 
      var data = { "name": searchText, "maxcount": self.maxcount() }; 
      $.ajax({ 
       type: "POST", 
       url: self.serviceUrlGet, 
       cache: false, 
       contentType: 'application/json', 
       dataType: "json", 
       data: JSON.stringify(data), 
       success: function (data) { 
        self.allObjects(data.d); 
        if (self.allObjects().length > self.maxcount()) { 
         self.visibleData(self.allObjects().slice(0, self.maxcount())); 
        } 
        else { 
         self.visibleData(self.allObjects()); 
        } 
       }, 
       error: function (jqXHR, textStatus, errorThrown) { 
        //console.log(textStatus); 
       } 
      }); 
     } 
    } 
    var modelSelectorD = new selector(5, "/services2", ""); 
    var modelSelectorC = new selector(5, "/services1", ""); 
    ko.applyBindings(modelSelectorD); 
    ko.applyBindings(modelSelectorC); 
    $(function() { 
     modelSelectorD.getData(""); 
    }); 
</script> 

хорошо работает, кроме Еогеасп, Еогеасп dosn't показать мне мои LI элементы. Почему это не так?

Answer 1

Задать вопрос: Knockoutjs Multiple Viewmodels in a single view для получения дополнительной информации по этому вопросу.

Что вам нужно сделать, это объединить две модели в одну модель представления, которую вы тогда ссылаетесь.

например.

var viewModel = { 
    modelSelectorD: new selector(5, "/services2", ""), 
    modelSelectorC: new slector(5, "/services1", "") 
} 

ko.applyBindings(viewModel); 

Или вы можете настроить целевой элемент для применения привязок.

Возможно, вы можете передать второй параметр, чтобы определить, какая часть документа, который вы хотите найти для атрибутов привязки данных. Например, ko.applyBindings (myViewModel, document.getElementById ('someElementId')). Это ограничивает активацию элемента с идентификатором someElementId и его потомками , что полезно, если вы хотите иметь несколько моделей просмотра и ассоциировать , каждый с другой областью страницы.

- http://knockoutjs.com/documentation/observables.html

Answer 2

Вы можете связать различные модели представлений к различным частям страницы:

ko.applyBindings(viewModel1, $('#section1')[0]); 
ko.applyBindings(viewModel2, $('#section2')[0]);