淘汰赛 - 在最后一个项目被渲染后执行代码 [英] knockout - execute code after the last item has been rendered

问题描述

我正在使用jquery quicksearch来搜索正在填充knockout foreach循环的表。
快速搜索元素需要在foreach完成后发起 。
我已经尝试了几种方法，但迄今为止还没有成功。

我尝试使用'afterRender'，但无法确定当前项目是集合的最后一个项目，
我也尝试过使用bindingHandlers，但后来我得到了一个长度为0的集合，而不是长度为2005的。

所以：

1. 找到foreach循环中最后一个元素的最佳方法是什么？


2. 什么是在这个特定情况下实现它的最好方法是什么？

这是我的观点：$ b​​
$ b

 < tbody data-bind =foreach：containers> 
< tr> 
< td>< span data-bind =text：code>< / span>< / td> 
< td>< span data-bind =text：typeName>< / span>< / td> 
< td>< span data-bind =text：parentClient>< / span>< / td> 
< td>< span data-bind =text：client>< / span>< / td> 
< td> 
 < i class =icon-trash>< / i> @delete< / a> 
 | 
< a data-bind =attr：{href：editUrl}> 
< i class =icon-edit>< / i> @ edit< / a> 
 | 
 < i class =icon-qrcode>< / i> 
 @printQr 
< / a> 
< / td> 
 
< / tr> 
< / tbody> 
  

以下是我的淘汰赛代码：

  function Container（data）{
 var self = this; 
 self.id = ko.observable（data.Id）; 
 self.code = ko.observable（data.Code）; 
 self.typeName = ko.observable（data.TypeName）; 
 self.parentClient = ko.observable（data.ParentClient）; 
 self.client = ko.observable（data.Client）; 
 self.deleteUrl = ko.computed（function（）{
 returnGetModal（'/ Containers / Delete /+ data.Id +'，'containerModal'）;; 
 }）; 
 self.editUrl = ko.computed（function（）{
 return'/ Containers / Edit /'+ data.Id; 
}）; 
 
 self.qrUrl = ko.computed（function（）{
 return'/ Qr / Index / 10？entity ='+ data.Id; 
}）; 
} 
函数ContainersViewModel（）{
 var self = this; 
 self.containers = ko.observableArray（[]）; 
 self.counter = ko.computed（function（）{
 return self.containers（）。length; 
}）; 
 $ b $ .getJSON（/ Containers / Json，function（data）{
 var containers = $ .map（data，function（item）{
 return new Container item）; 
}）; 
 
 self.containers（containers）; 
}）; 
 
}; 
 ko.applyBindings（new ContainersViewModel（））; 
  

非常感谢！

/ p>

解决方案

foreach绑定的afterRender选项可以做你正在寻找的东西，诀窍就是能够知道元素是最后一个。这可以使用提供的参数来解决，如 http://jsfiddle.net/n54Xd/ 中所示。


$ b

$ $ $ $ $ $ this.myPostProcessingLogic = function（elements，data） {
if（this.foreach [this.foreach.length-1] === data）
console.log（list is rendered）;
};

会调用每个元素，但是if将确保代码只运行在最后元素。

i'm using jquery quicksearch to search a table that is being populated by knockout foreach loop. the quicksearch element needs to be initiate after the foreach finishes. I've tried several approaches, but was unsuccessful so far.

I've tries using 'afterRender', but was unable to determine if the current item is the last item on the collection, i've also tried using a bindingHandlers, but then i got a collection of length 0 instead of length 2005.

so:

1. what's the best approach to finding the last element in a foreach loop ?
2. what's the best way to implement it in this specific scenario?

here's my view:

    <tbody data-bind="foreach: containers">
        <tr>
            <td><span data-bind="text: code"></span></td>
            <td><span data-bind="text: typeName"></span></td>
            <td><span data-bind="text: parentClient"></span></td>
            <td><span data-bind="text: client"></span></td>
            <td>
                <a data-bind="attr: { onclick: deleteUrl }">
                    <i class="icon-trash"></i>@delete </a>
                |
                <a data-bind="attr: { href: editUrl }">
                    <i class="icon-edit"></i>@edit</a>
                |
                <a data-bind="attr: { href: qrUrl }" target="blank">
                    <i class="icon-qrcode"></i>
                    @printQr
                </a>
            </td>

        </tr>
    </tbody>

and here's my knockout code:

function Container(data) {
        var self = this;
        self.id = ko.observable(data.Id);
        self.code = ko.observable(data.Code);
        self.typeName = ko.observable(data.TypeName);
        self.parentClient = ko.observable(data.ParentClient);
        self.client = ko.observable(data.Client);
        self.deleteUrl = ko.computed(function () {
            return "GetModal('/Containers/Delete/" + data.Id + "','containerModal');";
        });
        self.editUrl = ko.computed(function () {
            return '/Containers/Edit/' + data.Id;
        });

        self.qrUrl = ko.computed(function () {
            return '/Qr/Index/10?entity=' + data.Id;
        });
    }
 function ContainersViewModel() {
        var self = this;
        self.containers = ko.observableArray([]);
        self.counter = ko.computed(function () {
            return self.containers().length;
        });

        $.getJSON("/Containers/Json", function (data) {
            var containers = $.map(data, function (item) {
                return new Container(item);
            });

            self.containers(containers);
        });

    };
    ko.applyBindings(new ContainersViewModel());

Thanks a lot !

Nir

解决方案

The foreach binding afterRender option can do what you are looking for, the trick part is to be able to know that the element is the last one. That can be solved using the provided arguments like shown in http://jsfiddle.net/n54Xd/.

The function:

this.myPostProcessingLogic = function(elements, data) {
    if(this.foreach[this.foreach.length-1] === data)
        console.log("list is rendered");
};

Will be called for every element but the "if" will make sure the code only runs for the last element.

这篇关于淘汰赛 - 在最后一个项目被渲染后执行代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！