Магистраль: el и события

Я пытаюсь поиграть с Backbone и столкнулся с проблемами, особенно с «el» и событиями. Я заметил, что я не первый, но, к сожалению, не смог найти оптимальный ответ на мои вопросы.Магистраль: el и события

Моя база соответствующий код :

HTML

VIEW

<!DOCTYPE html> 
<html> 
    <head> 
     <script data-main="main" src="js/require.js"></script> 
    </head> 
    <body> 
     <div id="login"></div> 
    </body> 
</html>

: функция

Обратите внимание на комментарий в Initialize():

var view = Backbone.View.extend({ 
     el: $("#login"), 

     initialize: function() { 
      this.el.html('<div>click here</div>');   // TypeError: this.el.html is not a function 
     } 
.....

Вопрос 1 , это ошибка, зарегистрированная Firebug при загрузке этот код.

Но, когда я удаляю конфигурацию «el» и вместо этого назначаю соответствующее присваивание в initialize(), ошибка времени выполнения исчезла!

var view = Backbone.View.extend({ // "el" is now removed initialize: function() { this.el = $("#login"); // explicit assignement this.el.html('<div>click here</div>'); // appends the div correctly } .....

Вопрос 2: В обоих этих примерах, если я указываю события просмотра событий в CONFIG, событие никогда не срабатывает:

events: { "click": "tryLogin" }, ...

Пожалуйста, просветите меня! :)

источник

2015-01-29 Aleks

Конкретная проблема, с которой вы сталкиваетесь, заключается в том, что this.el не является объектом jQuery и не имеет метода .html. Вот что такое this.$el; this.el - это необработанный элемент DOM, а this.$el - это версия этого объекта, обернутая jQuery. Вы не должны перезаписывать el с выбранным элементом jQuery.

Настоящая проблема заключается в том, что вы пытаетесь изменить DOM в initialize.

Если в initialize вы хотите получить доступ к элементу DOM, который уже находится в DOM, вам необходимо передать опцию конструктору вида. Как правило, вы не должны этого делать. Ваш взгляд должен выполнять манипуляции с DOM в своем методе render.

От the docs:

Если вы хотите, чтобы создать представление, которое ссылается на элемент уже в DOM, передать в элементе в качестве опции: new View({el: existingElement})

На практике я» что el и $el по-прежнему доступны, но вы должны избегать их использования в initialize независимо. Придерживайтесь модификации DOM в render, что именно где-код «рисунок» Ваше мнение предназначается, чтобы пойти:

var view = Backbone.View.extend({ 
 
    el: '#login', 
 
    render: function() { 
 
    this.$el.append('<h1>What!</h1>'); 
 
    return this; 
 
    } 
 
}); 
 

 

 
$(function() { 
 
    new view().render(); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script> 
 

 
<div id="login"></div>

В отношении к вопросу 2, я не могу воспроизвести вашу проблему.Следующие работы точно так, как ожидалось:

var View = Backbone.View.extend({ 
 
    el: '#login', 
 
    events: { 
 
    'click': 'onClick' 
 
    }, 
 
    onClick: function() { 
 
    alert('click!'); 
 
    }, 
 
    render: function() { 
 
    this.$el.append('<h1>What!</h1>'); 
 
    } 
 
}); 
 

 
new View().render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script> 
 

 
    <div id="login"></div>

источник

2015-01-29 13:53:45 meagar

Насколько Вопрос 2 идет, если вы непосредственно возиться с 'this.el' в представлении, то ваши события нажраться, потому что' delegateEvents' не будет вызван для присоединения событий к новому 'el'. Однако, если вы используете ['setElement'] (http://backbonejs.org/#View-setElement) для изменения' el', все настраивается: новые 'el', new' $ el' и 'delegateEvents 'вызывается для перемещения привязок событий. –

Похоже, я теряю некоторые подробности здесь. Есть очень много противоречивой информации вокруг el и $ el. В примере TODO (с официального сайта базы данных: http://backbonejs.org/docs/todos.html) у нас есть такая конфигурация: el: $ ("# todoapp")! Существуют и другие примеры, например, типичный способ создания представления (новый вид ({el: $ ("# container")}) Вы говорите, что это неправильно. В чем же правда? :) – Aleks

@Aleks Я цитируется непосредственно из текущей документации, возьмите ее или оставьте ее – meagar

Магистраль: el и события

ответ

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