我有这个主干代码,但我无法弄清楚为什么我认为的事件不起作用。我的应用程序应该是一个可编辑的画廊。因此,我在 html 元素 $( ) 中创建了一个视图(画廊视图),#obrazekDetail
并使用ObrazekViews
. 我想触发事件,但ObrazekView
我无法让它工作。很抱歉再次提出相同类型的问题。但我找不到任何合适的解决方案。主干 JavaScript 和 HTML 代码如下:
<table id="obrazekDetail" cellspacing="0" cellpadding="2">
</table>
<!-- Templates -->
<script type="text/html" id="template-obrazek">
<tr id="<%= order %>">
<td><img src="<%= obrazek %>"/>
</td>
<td>Nadpis:<input name="nadpis" value="<%= nadpis %>" /></td>
<td>Popis:<input name="popis" value="<%= nadpis %>" /></td>
<td><input class="edit" type="submit" name="action" value="Edit" /></td>
<td><input class="delete" type="submit" name="action" value="Delete" /></a></td>
</tr>
</script>
<script type="text/template" id="galerie-template">
</script>
// js code
$(function(){
window.app = window.app || {};
window.app.obrazek = new Obrazek();
window.app.obrazky = new Obrazky();
window.app.view = new GalerieView();
});
var Obrazek = Backbone.Model.extend({
url : function() {
return "/ajax-obrazek/" + this.id + "/";
}
});
var Obrazky = Backbone.Collection.extend({
model: Obrazek,
initialFetch: function() {
var self = this;
$.each(obrazky_data, function(i, object) {
var obrazek = new Obrazek();
obrazek.set({
id: object.pk,
nadpis: object.fields.nadpis,
popis: object.fields.popis,
order: object.fields.order,
obrazek: object.fields.obrazek
});
self.model = obrazek;
self.add(self.model);
});
}
});
var ObrazekView = Backbone.View.extend({
template: _.template($("#template-obrazek").html()),
events: {
"click input.edit" : "edit",
"click input.delete" : "clear"
},
initialize: function() {
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.remove, this);
console.log(this);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
clear: function() {
console.log('test');
this.model.destroy();
},
edit: function() {
console.log('test');
}
});
var GalerieView = Backbone.View.extend({
el: $("#obrazekDetail"),
initialize: function() {
window.app.obrazky.bind('add', this.addOne, this);
window.app.obrazky.bind('reset', this.addAll, this);
window.app.obrazky.bind('all', this.render, this);
window.app.obrazky.initialFetch();
},
render: function() {
return this;
},
addOne: function(obrazek) {
var view = new ObrazekView({model: obrazek});
this.$el.append(view.render().el.innerHTML);
},
addAll: function() {
window.app.obrazky.each(this.addOne);
}
});