Я начинаю изучать Backbone с помощью этого простого примера:Простой пример магистральная не обновляя вид
<div id="counter">unkown</div>
<button id="add-button">ADD</button>
(function($){
var Counter = Backbone.Model.extend({
defaults: {
count: 0
}
});
var CounterView = Backbone.View.extend({
el: "#counter",
events: {
"click #add-button": "add"
},
add: function() {
this.model.count++;
render();
},
render: function() {
$(this.el).text(this.model.get("count"));
return this;
},
initialize: function(){
this.render();
}
});
var counterItem = new Counter();
var counterView = new CounterView({model: counterItem});
}(jQuery)); // function($)
Так при нажатии на кнопку «Добавить» счетчик должен увеличиваться, и вид должен быть обновления. Я привязал представление и модель и связал событие click с функцией добавления, но почему-то это не работает.
Так что, я думаю, я делаю что-то неправильно или просто не хватает привязки?
EDIT: Фиксированный, как предложил это ... до сих пор не работает:
<div class="list">
<div id="counter">unkown</div>
<button id="add-button">ADD</button>
</div>
(function($){
var Counter = Backbone.Model.extend({
defaults: {
count: 0
}
});
var CounterView = Backbone.View.extend({
el: "#counter",
events: {
"click #add-button": "add"
},
add: function() {
alert("ADD");
this.model.set("count", this.model.get("count") + 1);
this.render();
},
render: function() {
$(this.el).text(this.model.get("count"));
return this;
},
initialize: function(){
this.render();
}
});
var counterItem = new Counter();
var counterView = new CounterView({model: counterItem});
}(jQuery)); // function($)
EDIT: FIXED И РАБОТА
<div id="counterHolder">
<div id="counter">
<span>unknown</span>
<button id="add-button">ADD</button>
</div>
</div>
<script>
(function($){
var Counter = Backbone.Model.extend({
defaults: {
count: 0
},
increase: function(){
this.set("count", this.get("count") + 1);
}
});
var CounterView = Backbone.View.extend({
el: "#counter",
events: {
"click #add-button": "add"
},
add: function() {
this.model.increase();
},
render: function() {
$("#counter span").text(this.model.get("count"));
return this;
},
initialize: function(){
this.render = _.bind(this.render, this);
this.render();
this.model.bind('change:count', this.render);
}
});
var counterItem = new Counter();
var counterView = new CounterView({model: counterItem});
}(jQuery)); // function($)
</script>
Так раздражает, когда вы даже не можете получить самый простой пример работы и вам нужно отправить его на помощь. Вместо этого я использую Batman.js. Бух-доновая магистраль! – Ringo
Это показывает мне undefined '$ (" # counter span "). Text (this.model.count);' как получить доступ к прямому свойству модели, например. 'this.model.count' – imdadhusen
Доступ к свойствам модели осуществляется через get call (см. документацию по базовым документам) ... this.model.get (" count ") – Drejc