js子视图模板不渲染,虽然渲染函数运行
Backbone.js Sub-View Template Not Rendering Although Render Function Does Run
不幸的是,我已经为我的项目写了一个子视图。虽然它之前呈现得非常好,完全符合我的预期,但我发现我的应用结构不合理。我正在重组的过程中,其他一切都很有魅力,但在我的新设置下,它似乎无法在el
中渲染。el
呈现得非常好,但是没有插入任何内容。我把一个console.log()
在打印的template
,应该渲染,它是完美无瑕的。但是,that.$.el.html()
行根本不呈现模板。我不知道发生了什么事。文件如下。我的淘气要了我的命!
contactlist.js(视图):
define([
'jquery',
'underscore',
'backbone',
'text!templates/contactlist.html',
'collections/contacts'
], function($, _, Backbone, contactListTemplate, Contacts){
var ContactListView = Backbone.View.extend({
initialize: function () {
var that = this;
this.options = {
idclicked: null,
query: null,
scrolled: 0
};
this.options.get = function (property) {
return that.options[property];
};
this.options.set = function (properties) {
for (property in properties) {
that.options[property] = properties[property];
}
};
},
el: '.contact-list',
render: function() {
var that = this;
var contacts = new Contacts();
contacts.fetch({
success: function(contacts) {
var results = contacts.models;
if (that.options.query || that.options.query === '') {
var query = that.options.query.toUpperCase();
var results = contacts.toArray();
results = contacts.filter(function(contact){
return _.any(['firstname', 'lastname', 'email', 'phonenumber'], function(attr){
return contact.get(attr).toString().toUpperCase().indexOf(query) !== -1;
});
});
that.options.set({idclicked: null});
}
if (!that.options.idclicked && results[0]) {
that.options.idclicked = results[0].get('id');
Backbone.history.navigate('/contacts/' + results[0].get('id'), {trigger: true});
}
var template = _.template(contactListTemplate, {contacts: results, idclicked: that.options.idclicked});
that.$el.html(template);
$(document).ready(function() {
$('.contact-list').scrollTop(that.options.scrolled);
});
}
});
},
events: {
'click .contact': 'clickContact'
},
clickContact: function (ev) {
$('.contact-clicked').removeClass('contact-clicked').addClass('contact');
$(ev.currentTarget).addClass('contact-clicked').removeClass('contact');
window.location.replace($(ev.currentTarget).children('a').attr('href'));
}
});
return ContactListView;
});
更新:
尝试了一种有效的方法,但不确定这是否是一种好的做法。下面的代码是父视图:
allcontacts.js(视图):
define([
'jquery',
'underscore',
'backbone',
'text!templates/allcontacts.html',
'views/contactlist',
'collections/contacts'
], function($, _, Backbone, allContactsTemplate, ContactListView, Contacts) {
var AllContactsView = Backbone.View.extend({
initialize: function () {
var that = this;
this.options = {
idclicked: null,
pageloaded: false,
renderlist: true,
scrolled: null
};
this.options.get = function (property) {
return that.options[property];
};
this.options.set = function (properties) {
for (property in properties) {
that.options[property] = properties[property];
}
};
that.contactListView = new ContactListView();
},
el: '.allcontacts',
render: function() {
var that = this;
if (!that.options.pageloaded) {
var template = _.template(allContactsTemplate, {});
that.$el.html(template)
}
if (that.options.renderlist) {
this.contactListView.options.set({idclicked: that.options.idclicked, scrolled: that.options.scrolled});
this.contactListView.setElement('.contact-list').render();
}
},
events: {
'keyup .search': 'search',
'submit .search-contacts-form': 'cancelSubmit'
},
search: function (ev) {
this.contactListView.options.set({idclicked: this.options.idclicked, query: $(ev.currentTarget).val(), scrolled: this.options.scrolled});
this.contactListView.setElement('.contact-list').render();
},
cancelSubmit: function (ev) {
return false;
}
});
return AllContactsView;
});
检查el元素在绑定时是否可用。
相关文章:
- 关注函数运行过的表单字段(新手)
- 在函数运行时显示对话
- Javascript - 加载函数运行时未定义的变量
- Javascript变量在函数运行后不断重置自身
- 如何让 setTimeout 函数运行,然后停止使用循环
- 如何在函数运行之前隐藏 CSS
- 使用 .on 函数运行 jQuery 声明函数
- 在函数运行期间关闭 onClick
- jQuery停止函数运行两次
- Javascript:如何在函数运行完成之前对文档进行更改
- nodejs - 为什么我的异步函数运行两次
- 在传递值后停止函数运行
- 如何在 javascript 中的函数中将字符串作为函数运行
- 如何停止计时器函数运行
- 在浏览器空闲后保持设置超时函数运行
- JQuery:阻止一个函数运行,直到满足另一个函数条件“X”时间
- Angular 提供程序服务需要 init 函数运行一次
- 更新 Angular $interval 中的变量会导致其他函数运行
- 如何阻止此 setTimeout 函数运行
- 传入函数数组作为参数,对于函数中的每个函数运行函数