1

我将 Backbone.js、Require.js 和 Underscore.js 用于单页站点。

我有一个容器视图来处理子视图的换入和换出。

对于我的一个子视图，我需要知道 HTML 模板的渲染何时完成。原因如下：我的子视图 (view_subview.html) 的 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 已完全加载以便我可以调用提交的最佳方法是什么？

4

1 回答 1

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');' .... >
于 2012-07-15T08:38:22.740 回答