Я пытаюсь добавить и удалить класс на основе ссылки, которая нажата с использованием событий BackboneJS на основе учебника, которое я видел, но не знаю, почему мой код не работает.Неактивное событие Backbone
Если щелкнуть ссылку, добавьте к ней класс «selected» и удалите класс «selected» из любой другой ссылки, которая могла быть у вас.
Я не уверен, почему Событие не стреляет. Вот скрипку: http://jsfiddle.net/EL8gM/
Вот это JavaScript:
var Model = Backbone.Model.extend({
defaults: {
items: [
{
"name": "One",
"id": 1
},
{
"name": "Two",
"id": 2
},
{
"name": "Three",
"id": 3
}
]
}
});
var myModel = new Model();
var View = Backbone.View.extend({
el: '.js-container',
initialize: function(options) {
// Re-render when the model changes
this.model.on('change:items', this.render, this);
},
template: _.template($('#list-template').html()),
events: {
"click #items li a": "setSelectedItem"
},
render: function() {
console.log(this.model.toJSON());
this.$el.html(this.template(this.model.toJSON()));
},
setSelectedItem: function(event) {
var selectedItem = $(event.currentTarget);
console.log('selectedItem =', selectedItem)
// Set all of the items to not have the selected class
$('#items li a').removeClass('selected');
selectedItem.addClass('selected');
// Store a reference to what item was selected
this.selectedItemId = selectedItem.data('id');
return false;
}
});
var myView = new View({model: myModel});
myView.render();
Вот мой HTML
<script id="list-template" type="template">
<ul id="items">
<% for(i = items.length - 1; i >= 0; i--) { %>
<li>
<a href="#" data-id="<%= items[i].id %>"><%= items[i].name %></a>
</li>
<% } %>
</ul>
</script>
<div class="js-container"></div>
Вы не должны редактировать вопрос, чтобы включить фиксированный код, потому что тогда люди, просматривающие страницу, не могут «визуально различать» то, что было увязано в первую очередь! –