Question

我正在使用Hot Towel模板，我正在尝试使用list.js来过滤列表中的结果。

我已将list.min.js文件包含在我的bundle配置中，并且我还在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特有的东西以及我正在使用observables的事实。

我也不确定我视图末尾的脚本是否应该在我的视图模型中的某个位置？

非常感谢任何帮助。谢谢！

Answer 1

在撰写过程中，leaders.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/似乎已针对转换普通列表/表进行了优化，而潜在客户是由ko.observableArray()填充的datacontext.getLeadArticles ，所以最好将排序/过滤/分页处理移到datacontext。如果涉及更大的数据集，这将具有额外的优势：datacontext可以将功能卸载到服务器端。

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

1 个答案: