有以下看法:
ContactsApp.SettingsView = Backbone.Marionette.ItemView.extend({
initialize: function () {
this.bindTo(this.model, "change", this.modelChanged);
},
modelChanged: function (model, value) {
console.log(this.model.get('search'));
this.render();
},
events: {
'click .clickable': 'GoTo',
'keyup input[type=text]': 'search'
},
GoTo: function (ev) {
var dest = $(ev.target).data('dest');
if (dest == undefined) { return; }
if (dest === "next") { this.model.nextPage(); return; }
if (dest === "prev") { this.model.previousPage(); return; }
this.model.set({ page: dest });
},
search : function (ev) {
console.log('search');
},
template: "#additional-stuff-template"
});
还有我的模板:
<script type="text/template" id="additional-stuff-template">
<span class="clickable" data-dest="1">First</span>
<span class="clickable" data-dest="prev">Previous</span>
<input type="text" value="{{ page }}" size="3" /> of {{ pages}}
<span class="clickable" data-dest="next">Next</span>
<span class="clickable" data-dest="{{ pages }}">Last</span>
Search : <input type="text" class="search" value="{{ search }}" size="15" />
</script>
事件不会触发。如果我改变
events: {
'click .clickable': 'GoTo',
'keyup input[type=text]': 'search'
},
至
events: {
'click': 'GoTo',
'keyup': 'search'
},
我可以让点击事件运行,但它不仅仅是在跨度上(锚标签也有同样的问题。
我知道这是我正在做的愚蠢的事情......