0

我正在使用热毛巾模板，并且正在尝试使用 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;
    });

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

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

任何帮助将不胜感激。谢谢！

4

1 回答 1

2

<script>在合成过程中将忽略leads.html 中的标记。附带说明，请确保 HTML 片段具有单个根元素，否则 Durandal 会将它们包装在 adiv中，这并不总是可能的意图 ( 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如果涉及更大的数据集，这将具有额外的优势，可以将功能卸载到服务器端。

于 2013-06-18T05:15:57.907 回答