Просмотр событий не стреляет по созданным элементам?

Question

Попытка создать пример приложения todo, чтобы возиться с магистралью. Я не могу понять, почему событие click для флажка задачи не запускается. Вот мой код для TaskCollection, TaskView и TaskListView:

$(document).ready(function() {

Task = Backbone.Model.extend({});

TaskCollection = Backbone.Collection.extend({
    model: 'Task'
});

TaskView = Backbone.View.extend({
    tagName: "li",
    className: "task",
    template: $("#task-template").html(),
    initialize: function(options) {
        if(options.model) {
            this.model = options.model
        }
        this.model.bind('change',this.render,this);
        this.render();
    },
    events: {
            "click .task-complete" : "toggleComplete"
    },
    render: function(){
        model_data = this.model.toJSON();
        return $(_.template(this.template, model_data));
    },
    toggleComplete: function() {
        //not calling this function
        console.log("toggling task completeness");
    }
});

TaskListView = Backbone.View.extend({
    el: $("#task-list"),
    task_views: [],
    initialize: function(options) {
        task_collection.bind('add',this.addTask,this);
    },
    addTask: function(task){
        task_li = new TaskView({'model' : task});
        this.el.append(task_li.render());
        this.task_views.push(task_li);
    },
});
});

Шаблон для задания:

<script type='text/template' id='task-template'>
  <li class="task">
        <input type='checkbox' title='mark complete' class='task-check' />
        <span class='task-name'><%= name %></span>
      </li>
</script>

Я не могу понять, почему событие toggleComplete не сработает для задач. как я могу это исправить?

Answer 1

Проблема здесь в том, что события магистрали устанавливаются только на элемент представления (this.el) при создании нового представления.Но в вашем случае этот элемент не используется.Таким образом, у вас есть атрибут tagName:li в вашем представлении, который позволяет магистрали создавать новый элемент li, но вы его не используете.Все, что вы возвращаете, - это новый элемент списка, созданный из вашего шаблона, но не элемент, который создает магистраль, к которому вы можете получить доступ this.el

Таким образом, вы должны вручную добавить события в ваш элемент, созданный вашим шаблоном,jQuery или добавьте ваш шаблон как innerHtml к вашему элементу:

(this.el.html($(_.template(this.template, model_data)))

Answer 2

@ Андреас Кёберле отвечает правильно.Вам нужно назначить что-то для this.el, чтобы события работали.

Я изменил ваш шаблон и вашу функцию TaskView#render().К этому JSFiddle применены изменения.

Новая функция рендеринга :

render: function(){
    var model_data = this.model.toJSON();
    var rendered_data = _.template(this.template, model_data);
    $(this.el).html(rendered_data);
    return this;
}

Рекомендуется, чтобы render() возвращал это.

Одна строка в вашей функции TaskListView # addTask изменяется с this.el.append(task_li.render()); на this.el.append(task_li.render().el);.

Смена шаблона

Поскольку мы используем this.elв функции render () мы должны удалить тег <li> из шаблона.

<script type='text/template' id='task-template'>
    <input type='checkbox' title='mark complete' class='task-complete' />
    <span class='task-name'><%= name %></span>
</script>

Answer 3

Попробуйте изменить функцию рендеринга, чтобы она вызывала DelegateEvents (), например так:

render: function(){
    model_data = this.model.toJSON();
    this.el = $(_.template(this.template, model_data));
    this.delegateEvents();
    return this.el;
},

Вам бы лучше было изменить шаблон, чтобы он не включал li, а затем вернуть this.el вместо его замены, но если вы хотите, чтобы события работали, вам нужно, чтобы this.el так или иначе был корневым элементом;DelegateEvents () повторно присоединяет материал события, поэтому при изменении this.el это должно решить проблему.

Answer 4

Ваше событие привязано к классу .task-complete, но класс на вашем флажке - .task-check

Answer 5

Попробуйте изменить строки, в которых вы устанавливаете своих слушателей, используя .bind () для использования .live ().Важным отличием является то, что .live () следует использовать, когда вы хотите привязать слушателей к элементам, которые будут созданы после загрузки страницы.

Новейшая версия jQuery устраняет эту уродливость и упрощает используемые методы.установить прослушиватели событий.