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。它工作正常。如果您点击textField，则不会调用doSearch()函数。

我该如何解决这个问题。

Answer 1

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

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

看到这个小提琴：

JSFiddle

Answer 2

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

events: {
    "click": "doSearch"
}

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

2 个答案: