События jQuery и Backbone не срабатывают

Я знаю, что эта проблема возникает миллион раз, но я прошел через ответы, и никто из них не помогает.

JS Fiddle: http://jsfiddle.net/ZrYYy/

var LoginView = Backbone.View.extend({

    initialize: function () {

        console.log('Login View Intialized');
        this.el = $('#login-container');

    },

    // Setup the events (mainly the login)
    events: {

        // Login - function
        "click #login-btn" : "checkLogin"

    },

    // Actually authorization function
    checkLogin: function() {

        console.log("Authorizing login details with server...");

    }

});

// Get it all up and going
var newLogin = new Login();
var loginView = new LoginView({model: newLogin});

В скрипке, когда я связываю нормальный $('# login-btn'). click(); событие прекрасно работает, хотя оно не в моей собственной установке (с хромом). Событие clickbone click не работает.

Это то, что заголовок выглядит как на моем собственном коде

<link href="assets/admin/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/admin/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="assets/admin/css/style.css" rel="stylesheet" type="text/css">
<script src="assets/admin/js/jquery-1.9.1.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="assets/admin/backbone/login.js"></script>
<script src="assets/admin/js/bootstrap.min.js"></script>

Я знаю, что лучше всего включить их в нижний колонтитул, но пока эта проблема существует, не имеет значения (?).

Ответы

Ответ 1

Вы устанавливаете свой элемент вида следующим образом:

var LoginView = Backbone.View.extend({
  initialize: function() {
    this.el = $('#login-container');
  }
});

Каждый вид Backbone получает выделенную DOM node как ее el при создании. Когда вы устанавливаете this.el следующим образом, Backbone не знает, что вы изменили элемент и все еще слушаете события на оригинальной, отсоединенной node.

Попробуйте вместо этого объявить свойство el в представлении. Это правильный способ привязки представления к существующему элементу:

var LoginView = Backbone.View.extend({
  el: "#login-container",
});

Если вам нужно динамически установить представление el во время жизни представления, вы должны использовать view.setElement, который позволяет Backbone привязать events к новому элементу:

var LoginView = Backbone.View.extend({
  initialize: function() {
    this.setElement($('#login-container'));
  }
});

Изменить на основе комментариев: Похоже, вы пытаетесь инициализировать представление до того, как ваша страница будет полностью загружена. Магистраль не находит элемент #login-container, ergo не связывает события. Вы также можете проверить это с помощью своей скрипки: измените настройку onLoad на No wrap <in head> в настройках скрипта, а lo и behold, никакие события не будут обработаны.

Вы должны только инициализировать свое приложение после готовности DOM:

$(document).on('ready', function() {
  var newLogin = new Login();
  var loginView = new LoginView({model: newLogin});      
});

Или ярлык для него:

$(function() {
  var newLogin = new Login();
  var loginView = new LoginView({model: newLogin});      
});

Ответ 2

Мне пришлось установить el без jQuery, чтобы он работал в JSFiddle... el: 'body'

Ответ 3

Как объясняется другим ответом, для работы events вам нужно использовать свойство el. Свойство el необходимо для создания основы для регистрации событий путем ссылки на элемент в свойстве el. Но в некоторых случаях html еще не создан. В таких случаях вы можете использовать tagName вместо el. tagName полезно генерировать элемент динамически так же, как document.createElement.

Ответ 4

Backbones el Node определяет рабочую область контроллера просмотра. Только узлы внутри el будут затронуты, прослушаны или изменены из метода рендеринга Backbones.

Установите el как можно ближе к области, которую вы хотите поддерживать с помощью вашего контроллера просмотра, чтобы избежать перекрестков или нежелательного воспитания с помощью других контроллеров View.

Представьте, что View1 включает область просмотра2 и визуализирует ее узлы. View2 больше не работает, если он содержит ссылки на узлы, потому что они могут быть разбиты на рендеринг из View1.

Знайте о перекрестках и его рисках. Магистраль - это Библиотека, а не Рамка и не защитит вас от глупостей.