Question

我尝试渲染多个依赖于另一个父视图的子视图。在子视图上创建渲染函数时会出现问题。此子视图正确显示，但相关事件未初始化且无法正常工作。

这是代码。

 onSuccess : function(data) {
            this.asignView(this.subView1, '#div1', data.data1);
            this.asignView(this.subView2, '#div2', data.data2);

        },

...........

这是子视图的代码..

 events : {
    'clickT' : 'clickT',
},

 render : function(model) {
    $(this.el).html(this.template({
        model: model
    }));
    return this;
},

clickT: function(){

} ......

分配给子视图的方法是....

asignView : function(view, selector, options) {
    view.setElement(this.$(selector)).render(options);
},

那么，我该如何解决这个问题？

Answer 1

奇怪的是，我尝试将一些代码复制到jsfiddle，它似乎有用，你能指出我们的代码之间的其他差异吗？

var asignView = function(view, selector, options) {
    view.setElement(this.$(selector)).render(options);
};

var SubView = Backbone.View.extend({
    template: _.template('<span>A subView with id <%= model.id %>!</span>'),
    events: {
        'click': 'clickT'
    },
    render : function(model) {
        $(this.el).html(this.template({
            model: model
        }));
        return this;
    },
    
    clickT: function() {
        alert('Clicked');
    }
});

var subView1 = new SubView()
,subView2 = new SubView();

asignView(subView1, '#div1', {id: 1});
asignView(subView2, '#div2', {id: 2});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
<div id="div1"></div>
<div id="div2"></div>

子视图主干上的事件呈现

1 个答案: