淘汰赛 - 最后一个项目已经呈现后执行代码(knockout - execute code afte

我使用jQuery快速搜索来搜索正在被击倒for​​each循环填充的表。 在快速搜索元件需要在foreach结束后要启动。 我尝试过多种方法，但没有成功为止。

我一直在使用“AfterRender阶段”的尝试，但无法确定当前的产品上集合的最后一个项目，我已经使用bindingHandlers也尝试过，但后来我得到的，而不是2005年的长度长度为0的集合。

所以：

1. 什么是在foreach循环发现的最后一个元素的最佳方法？
2. 什么是实现它在这种特定情况下的最佳方法是什么？

这里是我的看法：

    <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>

这是我的淘汰赛代码：

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());

非常感谢 ！

尼尔

Answer 1:

在foreach绑定一个AfterRender选项可以做你在找什么，关键的部分是要能够知道的元素是最后一个。 可以使用所提供的参数等所示来解决http://jsfiddle.net/n54Xd/ 。

功能：

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

将要求每一个元素，但“如果”将确保代码只运行最后一个元素。

Answer 2:

尝试手动订阅的阵列变化。 通过使用订阅您将在阵列的修改通知。

如果您applyBindings电话订阅后，您将视图的刷新过程后得到通知。

见小提琴

var ViewModel = function () {
    var self = this;

    self.list = ko.observableArray();

    self.add = function () {
        self.list.push('Item');
    }
    self.list.subscribe(function () {
        alert('before');
    });
};
var vm = new ViewModel();
ko.applyBindings(vm);

vm.list.subscribe(function () {
    alert('after');
});

我希望它能帮助。

Answer 3:

我成功了使用里卡多·梅德罗斯宾纳的回答只有一个小调整。

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

我不得不添加_latestValue得到长度值，现在它正在努力达到目标。

Answer 4:

使用油门扩展，你完成填充后阵这样计算将被调用一次：

  self.counter = ko.computed(function () {
        return self.containers().length;
    }).extend({ throttle: 100 });

Answer 5:

晚补遗，但里卡多的答案，如果上述声明应该是：

if (this.foreach()[this.foreach().length - 1] === data) {
    //Your post processing logic
}

作为的foreach是一个函数。 最有可能的原因尼尔·韦纳有它评估的问题。

文章来源: knockout - execute code after the last item has been rendered