更新集合时，我仅尝试更新Backbone视图使用的模板的一部分。以下代码成功执行了search()和render_list()方法。此外，console.log(html)显示完整模板的html。但是，当我执行时replaceWith，它将选择器替换为空。如果我$(selector,html)用字符串替换（即：“ test”），则它成功替换为“ test”。
因此，由于某种原因，$(selector, html)选择器没有按照其意图执行操作。更奇怪的是，即使没有将更新的html插入文档中，浏览器仍会请求更新的html选择器中的图像。
define([
'jquery',
'underscore',
'backbone',
'collections/tracks',
'collections/genres',
'text!templates/search_view_title.html',
'text!templates/search_view.html'
],function($,_,Backbone,Tracks_collection,Genres_collection,Search_view_title_template,Search_view_template){
var Search_view = Backbone.View.extend({
el: $('#app'),
events: {
'change #genre_select': function(){this.search('genre')},
'click #search_btn': function(){this.search('search')}
},
template: _.template(Search_view_template),
initialize: function(){
// SET SOME IMPORTANT LAYOUT SETTINGS
$('#pagetitle').html(_.template(Search_view_title_template));
$('body').css('padding-top','124px');
this.genre_collection = new Genres_collection();
this.listenTo(this.genre_collection,'update',this.render);
this.genre_collection.fetch();
this.collection = new Tracks_collection();
this.listenTo(this.collection,'update',this.render_list);
},
search: function(searchtype){
switch(searchtype){
case 'genre':
console.log('genre changed');
this.collection.fetch({
data: {limit: 30, type:'genre',genre_id:$('#genre_select').val()}
});
break;
case 'search':
console.log('search changed');
this.collection.fetch({
data: {limit: 30, type:'search',keyword:$('#keyword').val()}
});
break;
}
console.log(this.collection);
},
render_list: function(){
var that = this;
console.log('render list');
var html = that.template({genres: this.genre_collection.models,tracks: this.collection.models});
console.log(html);
var selector = '#tracklist';
console.log($(selector,html));
that.$el.find(selector).replaceWith($(selector,html));
return this;
},
render: function(){
// MAKE 'THIS' ACCESSIBLE
var that = this;
console.log('render');
that.$el.find('#container').html(that.template({genres: this.genre_collection.models}));
return this;
}
});
return Search_view;
});
没有手头的HTML模板，我就可以承担一切。
这更接近我的操作方式：
var Search_view = Backbone.View.extend({
el: $('#app'),
events: {
'change #genre_select': 'onGenreChange',
'click #search_btn': 'onSearchClick'
},
template: _.template(Search_view_template),
initialize: function() {
// SET SOME IMPORTANT LAYOUT SETTINGS
$('#pagetitle').html(Search_view_title_template);
// Do this in css
$('body').css('padding-top', '124px');
this.genre_collection = new Genres_collection();
this.genre_collection.fetch();
this.collection = new Tracks_collection();
this.listenTo(this.genre_collection, 'update', this.render);
this.listenTo(this.collection, 'update', this.render_list);
},
render: function() {
console.log('render');
this.$('#container').html(this.template({
genres: this.genre_collection.models
}));
return this;
},
render_list: function() {
console.log('render list');
var html = this.template({
genres: this.genre_collection.models,
tracks: this.collection.models
});
console.log(html);
var $selector = this.$('#tracklist');
console.log($selector);
$selector.replaceWith($(html));
return this;
},
////////////
// events //
////////////
onSearchClick: function() {
console.log('search changed');
this.collection.fetch({
data: { limit: 30, type: 'search', keyword: $('#keyword').val() }
});
},
onGenreChange: function() {
console.log('genre changed');
this.collection.fetch({
data: { limit: 30, type: 'genre', genre_id: $('#genre_select').val() }
});
},
});
$('#pagetitle').html(_.template(Search_view_title_template));
该_.template函数返回一个函数，该函数本身在调用时返回呈现的模板。
可以将它与this.template通常包含结果_.template并准备调用（this.template(data)）的方法混淆。
拆分您的回调，函数很便宜，不必要的switch也很丑陋。
我做了你的search成onGenreChange和onSearchClick。
$('body').css('padding-top','124px');
尝试避免这种情况，可以使用CSS甚至内联<style>标签或内联style=""属性轻松完成。如果您有必要，因为它与动态行为有关，请search-class在css文件中创建一个类（例如），然后使用jQuery切换该类，将“设计”职责移出js：
$('body').toggleClass('search-class');
var that = this;
这仅在处理回调中上下文（this）不同的回调时才需要。在Backbone中，大多数情况下都是可以避免的，因为该context选项通常是可用的，并且在大多数情况下会自动设置（例如events回调）。
this.$el.find(selector)
等同于this.$(selector)。只是一点捷径。
.replaceWith($(selector,html));
replaceWith需要htmlString或Element或Array或jQuery。
$(selector, html)需要一个选择器和一个上下文。您想要$(html)将html字符串转换为jQuery元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句