0

我正在开发一个用于编辑内容的动态表单，我需要能够添加主干子视图/模块/插件并将它们绑定到从另一个视图呈现的标记。这个主窗体/视图的特殊之处在于，作为第三方开发人员，我无法更改此视图，所以我需要一种加载机制，用于在主视图中创建子视图的实例，但仅在加载主视图时. 我做了一个小小提琴来显示我想要做什么，在这个例子中，包含复选框的视图需要知道何时加载编辑器视图，以便我可以创建它的实例并将其绑定到正确的 el。

这是我正在使用的脚本

// This code cannot be altered by the developer who's creating the module/plugin
var EditorView = Backbone.View.extend({
    template:_.template($('#tpl-main-view').html()),

    initialize: function () {
    },

    render: function (eventName) {
        var html = this.template();
        $(this.el).html(html);
        return this;
    }

});

// This module/plugin needs to be aware of when the editor view is loaded
var SubModule = Backbone.View.extend({
    events: {
        'click input[type=checkbox]' : 'publish'
    },
    publish: function() {
        alert('publish...');
    }
});

var Container = Backbone.View.extend({
    events: {
        'click button' : 'loadView'
    },
    loadView: function() {
        var view = new EditorView();
        $('body').append(view.render().el);
    }
});

var main = new Container({el: $('#container')});

var module = new SubModule({el: $('#sub-view')});

这是我在小提琴中使用的 html

<div id="container">
    <button>Load</button>
</div>
<script id="tpl-main-view" type="text/template">
    <form>
        <fieldset>
            <legend>Edit</legend>
            <label>Name:</label>
            <input type="text" />
            <br />

            <!-- Sub module start -->
            <div id="sub-view">
                <label>Published</label>
                <input type="checkbox" />
            </div>
            <!-- Sub module end -->

        </fieldset>
    </form>
</script>

在这里提琴

用可能的答案更新了我的问题，但我不知道这是否是解决问题的最佳方法。是否可以使用 require js 或类似方法解决此问题？我认为 Dojo 有一些方法可以确定何时加载其他视图。

一个可能的解决方案：http: //jsfiddle.net/9phHk/1/

4

1 回答 1

0

您提到 EditorView 无法更改，但您的小提琴包含 EditorView 的修改代码，该代码侦听更改事件，如果您被允许向 EditorView 添加事件，那么您的方法应该有效。如果您想要一种不修改 EditorView 而是收听 keyup 事件的方法，那么我认为您可以尝试以下方法：

$(document).keyup(function (event) {
    // option 1: check the current active element id with the id of the input field
    // you are concerned about

    // option 2: check the model hasChanged value and display your sub view as needed
});
于 2013-06-12T21:23:32.817 回答