javascript - 如何在 Backbone 视图概念中触发功能

Question

我开始学习Backbone.js Views，出于练习目的，我尝试了以下代码。

<body>
<div id="search_container"></div>
<input type="text" id="field"/>
<script type="text/javascript">
SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        //var template = _.template( $("#search_template").html(), {data:'ggg'} );
        console.log(this.$el.attributes);
        $('#search_container').html(this.$el);
    },
    events: {
        "click #field": "doSearch"
    },
    doSearch: function( event ){
        console.log('ssss');
        alert('working!!');
    }
});
var search_view = new SearchView({el:"#field"});
</script>
</body>

如果您观察我的代码，我将文本字段添加到div.it 工作正常。如果您单击textField它不是调用doSearch()函数。

我怎样才能解决这个问题。

score 0 · Accepted Answer

您所做的是delegateEvents的缩写形式。此方法在后台使用jQuery.on，您的选择器将过滤当前视图的后代el，请参阅 Backbone 的delegateEvents：

this.$el.on(eventName, selector, method);

看到这个小提琴：

JSFiddle

score 0 · Accepted Answer

这里的问题是#field 不在视图内部，而是视图 $el 本身。要让它正常工作，请将您的事件哈希更改为

events: {
    "click": "doSearch"
}

javascript - 如何在 Backbone 视图概念中触发功能

2 回答 2

Related

Reference