у вас есть комбинация проблем с этим кодом.
1: область действия events
events: { ... } конфигурация использует el, который вы указали для привязки событий,Итак, если у вас есть html, который выглядит следующим образом:
<div id="foo">
<button id="bar">click me!</button>
</div>
, и у вас настроено представление, похожее на это:
MyView = Backbone.View.extend({
el: "#foo",
events: {
"click #bar": "buttonClicked"
}
});
, это будет охватывать событие click для #bar доэл #foo.это как если бы вы сделали это непосредственно с помощью jquery:
var el = $("#foo");
var button = $("#bar", el);
button.click(function(e){ ... });
Обратите внимание, что при выборе #bar в этом примере я определяю область видимости переменной el.Backbone делает что-то похожее, чтобы events вашего представления охватил селектор el.
2: jquery, выполненный до загрузки вашей DOM
, вы также, вероятно, столкнетесь спроблема с DOM, не загружаемым и доступным.если ваше представление определено до завершения загрузки DOM, вызов jQuery для el: $("body") ничего не найдет.
, чтобы исправить это, вы можете поместить вызов jquery в инициализатор представления:
initialize: function(){
this.el = $("body");
// ... other stuff here
}
, есть и другие способы обойти это.поскольку вы уже используете модуль, присвойте этот модуль именованной переменной и затем сразу же инициализируйте модуль в методе jquery:
MyApp = (function ($) {
console.log("backbone");
AppView = Backbone.View.extend({
el: $('body'),
events: {
"click input.main_submit_button": "addClaim",
},
addClaim: function (event) {
console.log("main submit button pressed");
event.preventDefault();
var claim = $('input.main_search_bar').val();
console.log('claim: ' + claim);
if ( claim != ""){
$('section.arguments').append('- ' + claim + ' ');
}
}
});
App = new AppView;
});
$(function(){
MyApp(jQuery);
})
Надеюсь, это поможет.