子视图主干渲染上的事件

Posted 2023-02-26

【中文标题】子视图主干渲染上的事件

【英文标题】：Events on subview backbone render

【发布时间】：2015-06-17 17:11:08

【问题描述】：

我正在尝试渲染依赖于另一个父视图的多个子视图。 在子视图上创建渲染功能时，问题就来了。此子视图正确显示，但关联的事件尚未初始化且无法正常工作。

这是代码。

 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);
,

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

【问题讨论】：

您希望在单击子视图时执行 clcickT？首先，是 clcickT 错字吗？你的事件映射是直接到clickT 而不是clcickT 。

抱歉，这是一个错误类型。函数是clickT。我的代码中有正确的名称。这不是问题。谢谢'fuyushimoya'。

那么当你点击子视图时，clickT 不会被执行？

不，它对事件没有响应。

【参考方案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>

【讨论】：

嗨¡ 感谢您的回答。我正在寻找我们的代码之间的任何差异，但它是相等的。我尝试在子视图中使用 this.delegateEvents() 方法，但它对我不起作用……有什么想法吗？

你用chrome dev-tool检查有没有出错？

啊！将'clickT' : 'clickT' 更改为'click' : 'clickT'，这可能是问题所在。

不，这不是问题...问题与主干中的子视图和delegateEvents有关，当子视图已渲染时，子视图的#element _dom不存在，并且相关的事件无法识别，但我不知道如何解决。

但在backbonejs.org/docs/backbone.html 中，它的setElement 为您将事件绑定到输入元素。而且，如果这是另一个错字，最好将 'clickT' : 'clickT' 更改为 'click' : 'clickT'。