Запуск события на el в Backbone View - PullRequest
Новая
       1

Запуск события на el в Backbone View

5 голосов
/ 04 ноября 2011

У меня есть представление, которое создает и заполняет список выбора.Я хочу привязать событие к событию 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 и el , однако в этом случае это не работает.

1 Ответ

6 голосов
/ 04 ноября 2011

Трудно отладить вашу проблему напрямую, потому что у нас нет всей информации (как выглядит SessionList ... шаблоны и т. Д.).

НО, я установил паруприведите ваш пример к некоторому коду, где событие действительно работает.Надеюсь, вы можете построить его оттуда?Вы можете разветвлять 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);

С учетом этого кода вы получите консольрегистрируйте значение каждый раз, когда вы выбираете элемент.

Поскольку вы этого не получаете, я предполагаю, что вы видите исключение или что-то в этом роде?Ваш отладчик дает вам подсказки?

Удачи!

...