如何使用list.js与热毛巾模板

How to use list.js with Hot Towel Template

本文关键字：毛巾模 js 何使用 list      更新时间：2023-09-26

我正在使用热毛巾模板，我试图使用list.js来过滤列表中的结果。

我已经在我的bundle配置中包含了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;
    });

当我运行应用程序时，我的列表正确填充，但是当我在搜索输入中键入任何内容时，没有发生过滤。我觉得我错过了一些特定于KnockoutJS的东西，以及我正在使用可观察对象的事实。

我也不确定在我的视图结束时的脚本是否真的应该在我的视图模型的某个地方?

任何帮助都将非常感激。谢谢!

leads.html中的<script>标记将在合成过程中被忽略。另一方面，要确保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;
    }
);

计划B:快速浏览http://listjs.com/似乎是为转换普通列表/表而优化的，而leads是由datacontext.getLeadArticles填充的ko.observableArray()，因此将排序/过滤/分页的处理移动到datacontext可能会更好。如果涉及到更大的数据集，那么datacontext可以将功能卸载到服务器端，这将具有额外的优势。

相关文章：