【问题标题】:Knockout does not trigger afterRender if collection is empty如果集合为空,则淘汰赛不会触发 afterRender
【发布时间】:2013-09-20 02:53:13
【问题描述】:

我有一个如下所示的 Knockout 模板,并且一切正常,包括在绑定完成后调用的 myFunction 事件处理程序 - 只要 myItems 集合具有任何元素。

当视图模型在 myItems 集合中有 0 个元素时,afterRender 似乎不会触发。

<table>
    <tbody data-bind="template: { foreach: myItems, afterRender: myFunction }">
        <tr>
            <td data-bind="text: $someProperty"></td>
        </tr>
    </tbody>                    
</table>

在没有数据的情况下,在视图模型被数据绑定后,是否还有其他可用于调用某些逻辑的 Knockout 事件?

我希望能够确定模板何时呈现,无论它是否有任何元素。

谢谢!

【问题讨论】:

  • 模板为空时不会渲染
  • 我意识到这一点。 :) 那么常见的方法是对 AJAX 调用进行回调,如果接收到的数据中没有项目,只需在那里做一些事情吗?谢谢!

标签: javascript knockout.js


【解决方案1】:

模板是您收藏中的项目的容器。如果您的集合中没有任何项目,则没有可渲染的内容并且不会触发“afterRender” - 这是常识。

您能否指定您想在此事件中实现什么,我会尽力提供帮助。

【讨论】:

  • 在检索和呈现数据时,我有一个标准的 AJAX 加载器图形旋转。完成后,我想隐藏图形(加载完成)。如果没有元素我想通知用户。
  • 如果没有向容器节点添加任何内容,则 afterRender 实际上会被触发(也许它以前没有被触发)但elements[] 是空的。免责声明:这可能只是针对真正的template: 绑定,而不是foreach:
【解决方案2】:

我决定简单地修改 AJAX 调用的回调,以显式调用 afterRender 事件处理程序(巧妙地命名为 afterRender):

FUNCTIONS.InvoiceList = function(target) {

    var self = this;

    self.target = target;

    self.invoices = ko.observableArray();

    self.afterRender = function() {
        $('.loading').hide();
    };

    $.getJSON("http://hostname/api/invoices", function (data) {
        self.invoices(data);

        // Invoke event handler even when there are no items
        if(data.length==0) {
           self.afterRender();
        }

    });
};

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2012-04-08
  • 2014-04-16
  • 2016-08-13
  • 1970-01-01
  • 2012-11-25
  • 1970-01-01
  • 1970-01-01
  • 2022-07-12
相关资源
最近更新 更多