Как использовать list.js с шаблоном Hot Towel

Question

Я работаю с шаблоном Hot Towel, и я пытаюсь использовать list.js для фильтрации результатов в списке.

Я включил файл list.min.js в свой конфигурационный файл, и я также правильно указал его в файле index.html.

У меня есть мнение (leads.html), который выглядит следующим образом:

<div id="lead-article-list"> 
    <input class="search" type="text" /> 
    <ul class="list" data-bind="foreach: leads" > 
     <li> 
      <span data-bind="text: name" class="name"></span> 
     </li> 
     <li> 
      <span data-bind="text: description" class="description"></span> 
     </li> 
    </ul> 
</div> 
<script type="text/javascript"> 
    var options = { 
     valueNames: ['name', 'description'] 
    }; 
    var featureList = new List('lead-article-list', options); 
</script> 

, а затем у меня есть соответствующие ViewModel (leads.js), который выглядит следующим образом:

define(['services/datacontext', 'durandal/plugins/router'], 
    function (datacontext, router) { 
     var leads = ko.observableArray(); 
     var activate = function() { 
      return datacontext.getLeadArticles(leads, false); 
     }; 
     var vm = { 
      activate: activate, 
      leads: leads 
     }; 
     return vm; 
    }); 

When Я запускаю приложение, мой список заполняется правильно, но когда я ввожу что-либо в ввод поиска, фильтрация не происходит. Я чувствую, что мне не хватает чего-то определенного для KnockoutJS и того факта, что я работаю с наблюдаемыми.

Я также не уверен, что сценарий в конце моего представления действительно должен быть где-то в моей модели просмотра?

Любая помощь была бы принята с благодарностью. Благодаря!

Answer 1

Тег <script> в руководстве. Html будет проигнорирован во время композиции. В боковом примечании убедитесь, что фрагменты HTML имеют один корневой элемент, иначе Durandal обернет их в div, что не всегда может быть предназначено (http://durandaljs.com/documentation/Creating-A-View/). Таким образом, фрагмент html должен выглядеть примерно следующим образом.

<div id="lead-article-list"> 
    <input class="search" type="text" /> 
    <ul class="list" data-bind="foreach: leads" > 
     <li> 
      <span data-bind="text: name" class="name"></span> 
     </li> 
     <li> 
      <span data-bind="text: description" class="description"></span> 
     </li> 
    </ul> 
</div> 

Я предложил бы переместить содержимое сценария в viewAttached обратного вызова. viewAttached предоставит скомпилированный вид в качестве аргумента, но не гарантирует, что view присоединен к DOM только к родительскому узлу. Таким образом, вам нужно дать что-то вроде следующего: попытайтесь выяснить, достаточно ли этого для list.js.

define(['services/datacontext', 'durandal/plugins/router'], 
    function (datacontext, router) { 
     var leads = ko.observableArray(); 
     var activate = function() { 
      return datacontext.getLeadArticles(leads, false); 
     }; 
     var viewAttached = function(view){ 
      var options = { 
       valueNames: ['name', 'description'] 
      }; 
      var featureList = new List(view, options); 
     }; 
     var vm = { 
      activate: activate, 
      leads: leads, 
      viewAttached: viewAttached 
     }; 
     return vm; 
    } 
); 

Plan B: На быстром взгляде http://listjs.com/, кажется, оптимизировано для преобразования простых списков/таблицы, а ведет это ko.observableArray(), который получает заселен datacontext.getLeadArticles, так что может быть лучше перенести обработку сортировки/фильтрация/пейджинг до datacontext. Это будет иметь дополнительное преимущество в том, что datacontext может разгрузить функциональность серверной стороне, если в ней задействованы более крупные наборы данных.