Question

我遇到了让delegateEvents工作的问题。

这是我的视图定义：

//the "." in Mustache templating simply means it will iterate through an array of JSON objects
var locationViewTemplate = '<div class="ui-content-panel ui-content-panelLocationView ui-corner-all "><div><ul class="ui-content-list">' +
'{{#.}}' +
'<li><span>{{Name}}</span> <a href="#">edit</a></li>' +
'{{/.}}' +
'{{^.}}' +
'<li>No Locations Defined</li>' +
'{{/.}}' +
'</ul></div><input type="text" id="locationName"> <input class="locationAdd" type="button" title="Add Location" id="locationAdd" value="Add"></div>';


//module: Location
(function(Location) {
//define Model
Location.LocationModel = Backbone.Model.extend({
    initialize: function () {
        this.entityName = 'location';
    }
});

//define collection
Location.LocationCollection = Backbone.Collection.extend({
    model: Location.LocationModel,
    initialize: function () {
        this.entityName = 'location';
    },
    getAllLocations: function () {
        this.functionName = 'GetAll';
        this.fetch();
    }
});

//define View(s)
Location.LocationListView = Backbone.View.extend({
    events: {
        'click #locationAdd': 'addClickEvent'
    },
    render: function () {
        $(this.el).html(Mustache.render(locationViewTemplate, this.collection.toJSON()));
        //this.delegateEvents();

        return this;
    },
    initialize: function() {
        this.render();
        //this.delegateEvents();
    },
    addClickEvent: function (){
        alert('this is the function');
    }

});


})(vHub.module('location'));

以下是选择器'#locationAdd'应该找到的按钮的定义：

<input class="locationAdd" type="button" title="Add Location" id="locationAdd" value="Add">

我还从文档就绪事件中调用delegateEvents：

//steal the JS libs that we need
steal('json2.js','mustache.js','underscore.js', 'jquery-ui-1.8.18.custom.min.js')
.then('backbone.js')
.then('./common.js')
.then('./modules/FrameTop.js', './modules/Location.js')
.then('./modules/AdminBasicsPage.js')
.then( function() {
$(function(){
initializeApp();

var Location = vHub.module('location');
var lc = new Location.LocationCollection();
lc.getAllLocations();

var lv = new Location.LocationListView({collection: lc});

$('#content').html($(lv.el).html());


});
});

我已经在stackOverflow上查看了我能找到的内容，并尝试了其中的一些建议。但是没有一个成功。任何帮助将不胜感激。谢谢！

Answer 1

有趣的是你应该问......我刚刚在我正在处理的应用程序中解决了类似的问题，而且看，这是Backbone.js标签下的首要问题。

不确定我们是否遇到了同样的问题，但我的问题是我尝试附加的按钮实际上超出了我的观点范围。骨干视图具有el属性，click事件仅附加到该根元素的子项。

在我的应用中，我有一个列表视图，其中ul为根元素。我的按钮和列表都是div标记内的兄弟：

<div>
    <ul id="my-list-view"></ul>
    <button id="save">Save</button>
</div>

我的代码最初工作，因为我使用initialize函数中的原始jQuery选择器设置了单击处理程序。我实际上已经超出了我的视图范围并附加了点击处理程序，这完全不是我的意图。当我重构以试图使其符合Backbone惯例时，它无法触发。

尝试在代码中使用常规jQuery选择器，如果它有效，您可能会遇到类似的范围问题。像这样：

initialize: function() {
    $('#locationAdd').click(addClickEvent);
    this.render();
}

这不是Backbone的做法 - 您希望像在代码中一样使用events哈希。但您可能需要将集合视图嵌套在控件级视图中。

Answer 2

我从你发布的代码中取得了我所能做的，而here是一个有点工作的例子。如果你想发布更多代码，我可能会帮助调试。正如Elf所提到的，无需明确调用delegateEvents()。

骨干视图委托事件将无法正常工作

2 个答案: