Knockoutjs自定义绑定在项目完全呈现之前执行

本文介绍了Knockoutjs自定义绑定在项目完全呈现之前执行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在尝试使用数据表对项目列表执行回调以进行分页。现在我想执行我的回调后，所有我的项目已呈现不是每个项目呈现后。在 SO问题之后，我创建了简单的自定义绑定 ko.bindingHandlers.ConvertToDataTable = { update：function（element，valueAccessor，allBindings）{ var list = ko。 utils.unwrapObservable（valueAccessor（））; //抓取依赖到obs数组 var tableId = allBindings（）。tableId; $（'＃'+ tableId）.dataTable（{sDom：<'row'<'span6'l><'span6'f> r> t<'row '<'span6'i><'span6'p>>}）; $ / code $ / pre $ b $我的看法是： < table class =table table-striped table-bordereddata-bind =attr：{id：tableId}> < thead> < tr> < td>任务名称< / td> < td>任务说明< / td> < / tr> < / thead> < tbody> <！ - ko foreach：tasks，ConvertToDataTable：tasks，tableId：tableId - > < tr> < td data-bind =text：Name>< / td> < td data-bind =text：Details>< / td> < / tr> <！ - / ko - > < / tbody> < / table> 该代码可以正常工作，但只有少量的项目。但大量的recoreds（例如500）自定义绑定执行之前，我的项目是完全受到重新审理。任何想法？ 更新 我通过AJAX从服务器获取数据，所以也许我的自定义绑定首先执行，而我的可观察数组 items 为空解决方案从逻辑的角度来看，不应该把 ConvertToDataTable ，而不是 foreach ？ 另外，不应该通过绑定或视图模型来控制表格布局？自定义绑定对于硬编码值是一个非常糟糕的地方。 无论如何， controlsDescendantBindings 是你的朋友（ $ b $ href =http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html =nofollow> docs ）： b 自定义绑定： ko.bindingHandlers.dataTable = { init：function（）{ return {controlsDescendantBindings：true}; ， update：function（element，valueAccessor，allBindings，viewModel，bindingContext）{ var layout = valueAccessor（）; ko.applyBindingsToDescendants（bindingContext，element）; $（element）.dataTable（{sDom：layout}）; } }; 查看模型： { dataTableLayout：<'row'<'span6'l><'span6'f> r><'row'< span6'i> span6'p>>， tasks：ko.observableArray（[/ * ... * /]）} Template： < table data-bind =dataTable：dataTableLayout > < thead> < tr> < td>任务名称< / td> < td>任务说明< / td> < / tr> < / thead> < tbody data-bind =foreach：tasks> < tr> < td data-bind =text：Name>< / td> < td data-bind =text：Details>< / td> < / tr> < / tbody> < / table> http://jsfiddle.net/WcaM5/ 声明：我不清楚jQuery DataTables是如何工作的，所以样本是aircode。我想说的是，如果需要，你可以手动控制绑定。 I'm trying to execute callback on list of items to make pagination using DataTable. Now i want to execute my callback after all my items have been rendered not after each item is rendered. Following that SO question i created simple custom bindingko.bindingHandlers.ConvertToDataTable = { update: function (element, valueAccessor, allBindings) { var list = ko.utils.unwrapObservable(valueAccessor()); //grab a dependency to the obs array var tableId = allBindings().tableId; $('#' + tableId).dataTable({ "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>" }); }}My view is:<table class="table table-striped table-bordered" data-bind="attr: { id: tableId }"> <thead> <tr> <td>Task Name</td> <td>Task Description</td> </tr> </thead> <tbody> <!-- ko foreach: tasks, ConvertToDataTable: tasks, tableId: tableId --> <tr> <td data-bind="text: Name"></td> <td data-bind="text: Details"></td> </tr> <!-- /ko --> </tbody></table>That code works fine but with small number of items. but incase of big number of recoreds(e.g 500) the custom binding is executed before my items are fully renedered..Any Ideas?UpdateI get my data from server via AJAX, so maybe my custom binding is executed first while my observable array items is empty 解决方案 From a logical point of view, shouldn't the ConvertToDataTable binding be on the table itself, instead on the foreach?Also, shouldn't you control table layout via the binding or the view model? The custom binding is a very bad place for hard-coded values.Anyway, controlsDescendantBindings is your friend (docs):Custom Binding:ko.bindingHandlers.dataTable = { init: function () { return { controlsDescendantBindings: true }; }, update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { var layout = valueAccessor(); ko.applyBindingsToDescendants(bindingContext, element); $(element).dataTable({ "sDom": layout }); }};View Model:{ dataTableLayout: "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>", tasks: ko.observableArray([/* ... */])}Template:<table data-bind="dataTable: dataTableLayout"> <thead> <tr> <td>Task Name</td> <td>Task Description</td> </tr> </thead> <tbody data-bind="foreach: tasks"> <tr> <td data-bind="text: Name"></td> <td data-bind="text: Details"></td> </tr> </tbody></table>http://jsfiddle.net/WcaM5/Disclaimer: I don't know exactly how jQuery DataTables work, so the sample is aircode. The point I want to make is that you can take manual control over the binding if necessary. 这篇关于Knockoutjs自定义绑定在项目完全呈现之前执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！