我有一个创建和填充选择列表的视图。我想在Change事件上绑定一个事件(当用户选择一个不同的选项时。
它只是输出接近这个的东西:
<select>
<option value="id">ID Name</option
</select>
观点:
App.Views.SessionList = Backbone.View.extend({
tagName: 'select',
id: 'sessionList',
events: {
'change': 'selectionChanged'
},
initialize: function () {
// Load Collection
_.bindAll(this, 'selectionChanged');
this.template = _.template($('#optionsTemplate').html());
this.Sessiontemplate = _.template($('#session_template').html());
this.SelectedSessiontemplate = _.template($('#selected_session_template').html());
// Create Collection
this.SessionList = new App.Collections.SessionList();
// Set Bindings
this.SessionList.bind('add', this.addSession, this);
this.SessionList.bind('reset', this.addSessions, this);
this.render();
this.SessionList.fetch();
},
render: function () {
return this;
},
addSession: function (item, num) {
if (num === 0) {
$(this.el).append(this.SelectedSessiontemplate(item.toJSON()));
console.log("Selected");
}
else {
$(this.el).append(this.Sessiontemplate(item.toJSON()));
}
},
addSessions: function () {
var self = this;
// Add all Rows
for (var i = 0; i < self.SessionList.models.length; i++) {
this.addSession(self.SessionList.models[i], i);
}
},
selectionChanged: function (e) {
var field = $(e.currentTarget);
var value = $("option:selected", field).val();
}
});
会话模板只是简单:
<option value="{{Id}}">{{Name}}</option>
事件永远不会被触发,而且似乎没有正确绑定。我想在更改选择列表时触发它。
我原本以为我可能遇到类似的问题: backbone.js events and el,但在这种情况下不起作用。
答案 0 :(得分:6)
很难直接调试您的问题,因为我们没有所有信息(SessionList
看起来像什么......模板等)。
但是,我已将您的示例与事件所在的某些代码配对,确实有效。希望你可以从那里建立它?如果您想到达失败的地方,我们可以fork the jsFiddle,我们可以尝试进一步提供帮助。
window.App = { Views: {} };
App.Views.SessionList = Backbone.View.extend({
tagName: 'select',
events: {
'change': 'selectionChanged'
},
initialize: function () {
_.bindAll(this, 'selectionChanged');
this.render();
},
render: function () {
$(this.el).append('<option value="foo">Option 1</option>');
$(this.el).append('<option value="bar">Option 2</option>');
return this;
},
selectionChanged: function (e) {
var value = $(e.currentTarget).val();
console.log("SELECTED", value);
}
});
var view = new App.Views.SessionList();
$("body").append(view.el);
根据该代码,每次选择项目时,您都会获得一个带有该值的控制台日志。
既然你没有得到那个,我猜你正在看到异常或类似的东西?你的调试器会给你提供任何提示吗?
祝你好运!