如何使用list.js与热毛巾模板
How to use list.js with Hot Towel Template
我正在使用热毛巾模板,我试图使用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
可以将功能卸载到服务器端,这将具有额外的优势。
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- jqueryajax调用是复制url,当在模态视图之后在外部js文件中进行调用时
- React.js中显示了模态时如何执行某些操作
- Angular Js 尝试从主按钮回调动态更改模态文本并且不起作用
- Angular js - 异步调用 $scope.users 后不更新模态值
- 理解模态.js中复杂的 $.extend
- setScrollbar() 方法实际上在模态.js中做什么
- 如何在模态助推器中显示计算结果(JS)
- 在模态中使用 e.target 的复杂 if 条件.js
- 创建一个模态指令,并将click事件绑定到angular js中
- 当使用angular.js和ui.bootstrap时,从模态内部的按钮单击事件未触发
- 显示控制器angular js的模态
- 如何在使用模态的同时使用AJAX在js和php之间进行通信
- $scope在模态角 js 中未定义
- 角度JS.超时模态隐藏在已打开的模态后面
- 模态对话框加载 jquery 在控制台中执行,但不从应用程序加载.js
- Angular JS将msg广播到多个视图,包括模态窗口
- 无法从模态元素 Angular JS 获取$file
- 具有 JS CSS 和 HTML 的多个模态窗口
- 动态加载引导模态内容并使用 Angular.js 打开它