Question

我在单页网站上使用Backbone.js，Require.js和Underscore.js。

我有一个容器视图，用于处理子视图的交换。

对于我的一个子视图，我需要知道何时完成HTML模板的渲染。原因如下：我的子视图html模板（view_subview.html）包含iframe和表单：

<iframe name="myIFrame" id="myIFrame"></iframe>

<form action="http://myendpt.com/do" method="get" id="myForm" target="myIFrame">
    <input type="hidden" name="param1" value="value1"/>
</form>

通过提交表单，myendpt.com / do将处理生成要在iframe中显示的内容。

我正在尝试弄清楚事情的时间安排，以便我可以在加载后提交表单。

我的子视图如下所示：

define([
    'jQuery',
    'Underscore',
    'Backbone',
    'config',
    'text!templates/view_subview.html'
], function ($, _, Backbone, Config, tpl) {
    var SubView = Backbone.View.extend({

        template: _.template(tpl),

        initialize: function () {
        },

        render: function (eventName) {
            $(this.el).html(this.template({config: Config}));
            $('#myForm').submit();
            return this;
        },
    });
    return SubView;
});

render（）中的$（'＃myForm'）。submit（）调用实际上并不提交表单。大概这是因为HTML仍在加载，文档还没有准备好。

如果我移动$（'＃myForm'）。submit（）调用我的容器视图，我可以使它工作，但我希望SubView拥有该表单的提交。我的容器视图（以及其他不相关的子视图）不需要知道或关心SubView中发生的事情。

在SubView中（并且仅在SubView中）检测到HTML已完全加载以便我可以调用提交的最佳方法是什么？

Answer 1

为什么不在iframe加载并准备好时触发事件？你的渲染函数可以绑定到该事件;单独的东西：

render: function(eventName){
    $(this.el).html(this.template({config:Config})
        .bind('formReady',function(){
             $('#myForm',this.el).submit();
        })
    return this;
}

并且，只需让你的iframe触发事件onload：

<iframe onload='$(this).trigger('formReady');' .... >

如何知道Backbone View模板何时完成渲染？

1 个答案: