У вас две проблемы:
- Как узнать, какая кнопка нажата?
- Как узнать, с каким логотипом вы работаете?
Самый простой способ решить первую проблему - привязать к кнопкам класс:
<button type="button" class="update">Update</button>
<button type="button" class="delete">Delete</button>
Затем вы можете привязать события непосредственно к кнопкам, используя events
представления:
events: {
'click .update': 'update_caption',
'click .delete': 'delete_caption'
}
Кроме того, вы всегда должны указывать атрибут type
при использовании <button>
, в спецификации указано, что <button type="button">
является значением по умолчанию, но некоторые браузеры вместо этого используют <button type="submit">
. Если вы всегда указываете type="button"
, вам не нужно беспокоиться о том, до какой чепухи берутся браузеры.
Теперь вам нужно выяснить, с каким логотипом вы работаете.
Один из способов - продолжать использовать единое представление и прикрепить атрибут данных в удобном для поиска месте. Например:
{{#logos}}
<div class="logo" data-logo="{{id}}">
<!-- ... -->
</div>
{{/logos}}
Затем вы можете делать такие вещи в обработчиках кликов:
update_caption: function(ev) {
var id = $(ev.currentTarget).closest('.logo').data('logo');
var logo = this.collection.get(id);
//...
}
Демо: http://jsfiddle.net/ambiguous/DwkPV/
В качестве альтернативы вы можете использовать одно дополнительное представление для каждого логотипа. Здесь у вас будет одно представление для каждого логотипа:
var LogoView = Backbone.View.extend({
className: 'logo',
events: {
'click .update': 'update_caption',
'click .delete': 'delete_caption'
},
//...
});
и шаблон без {{#logos}}
цикла или внешнего логотипа <div>
:
<div class="logo-input">
<input type="text" placeholder="Caption" value="{{caption}}" />
</div>
<div class="logo-buttons">
<button>Update</button>
<button>Delete</button>
</div>
а обработчики кликов просто смотрят на this.model
:
update_caption: function() {
var logo = this.model;
//...
}
Затем основное представление для перебора логотипов и рендеринга подвидов:
var LogosView = Backbone.View.extend({
render: function() {
this.collection.each(function(logo) {
var v = new LogoView({ model: logo });
this.$el.append(v.render().el);
}, this);
return this;
},
//...
});
Демо: http://jsfiddle.net/ambiguous/9A756/
person
mu is too short
schedule
08.06.2014