Question

我正在开发一个用于编辑内容的动态表单，我需要能够添加主干子视图/模块/插件并将它们绑定到从另一个视图呈现的标记。关于这个主要表单/视图的特殊之处在于，作为第三方开发人员，我无法更改此视图，因此我需要的是一种用于在骨干网中创建子视图实例的加载机制，但仅在加载主视图时。我做了一个小小提示，显示了我想要做的事情，在这个例子中，包含复选框的视图需要知道加载编辑器视图时所以我可以创建它的实例并将其绑定到正确的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>

Fiddle here

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

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

Answer 1

你提到不能改变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
});

在加载父视图时知道的主干子视图/插件

1 个答案: