2014-03-14 4 views
0

Я пытаюсь добавить и удалить класс на основе ссылки, которая нажата с использованием событий 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> 
+1

Вы не должны редактировать вопрос, чтобы включить фиксированный код, потому что тогда люди, просматривающие страницу, не могут «визуально различать» то, что было увязано в первую очередь! –

ответ

1

Должно быть

events: { 
    "click #items li a": "setSelectedItem" 
}, 

редактировать: есть еще одна опечатка, где опечатка консоль

cosnole.log('selectedItem =', selectedItem) 
+0

Спасибо. Я обновил скрипку, но, похоже, не работает. Спасибо за проверку, я пытался научиться магистрали, хотя это был медленный процесс, и я просто пытаюсь выяснить события сейчас. Я обновлю вопрос с новым кодом и скрипкой: http://jsfiddle.net/EL8gM/ – Mdd

+1

Он работает. В вашей новой скрипте вы изменили эту строку: var selectedItem = $ (event.currentTarget); – lyoung

+0

доказательство: http://jsfiddle.net/youngjl1/5LwPj/ – lyoung

Смежные вопросы