问题描述
这是我的Backbone.js:
Here's my Backbone.js:
(function() {
window.App = {
Models: {},
Collections: {},
Views: {},
Router: {}
};
window.template = function(id) {
return _.template( $('#' + id).html() );
};
var vent = _.extend({}, Backbone.Events);
App.Router = Backbone.Router.extend({
routes: {
'' : 'index',
'*other' : 'other'
},
index: function() {
},
other: function() {
}
});
App.Models.Main = Backbone.Model.extend({
defaults : {
FName: ''
}
});
App.Collections.Mains = Backbone.Collection.extend({
model: App.Models.Main,
initialize: function() {
this.fetch({
success: function(data) {
console.log(data.models);
}
});
},
url: '../leads/main_contact'
});
App.Views.Mains = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
this.collection.on('reset', this.render, this);
console.log(this.collection);
},
render: function() {
return this.collection.each(this.addOne, this);
},
addOne: function(main) {
var mainC = new App.Views.Main({ model: main});
this.$el.append(mainC.render().el);
return this;
}
});
App.Views.Main = Backbone.View.extend({
tagName: 'li',
template: template('mainContactTemplate'),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
mains = new App.Collections.Mains();
main = new App.Views.Main({ collection: mains});
new App.Router;
Backbone.history.start();
})();
我想做的是将 ul
中返回的数据绑定到名为 $('#web-leads')
的DOM元素.给定此代码,我该怎么做?顺便说一句,我已经在此处发布了并尝试遵循第一个答案和第二个答案的组合.但是我仍然没有将HTML和数据绑定到DOM.数据从我的集合中的服务器正确返回,所以我知道这不是问题.不用担心路由器的东西.以后再说.
What I want to do is have the data returned in the ul
to be bound to a DOM element called $('#web-leads')
. How do I do that, given this code? Incidentally, I've already posted about this here and tried to follow the first answer and the second answer combined. But I still don't get HTML and data bound to the DOM. The data is returning from the server correctly in my collection, so I know that's not the problem. Don't worry about the router stuff. That's for later.
推荐答案
通常在Backbone中,您不会将数据放在DOM元素上:而是将其放在包装该DOM元素的视图中.
Generally in Backbone you don't put data on DOM elements: you put it in views that wrap that DOM element.
话虽如此,如果您真的想在元素上存储数据,那么jQuery有一个用于该功能的函数:
That being said, if you really want to store data on the element, jQuery has a function for that:
$('#web-leads').data('someKey', 'yourData');
然后您可以使用以下方法检索该数据:
Then you can retrieve that data with:
$('#web-leads').data('someKey');
*编辑*
在与OP的评论讨论中,很明显,真正的目标只是将视图的元素附加到页面上的元素.如果要附加的元素是#web-leads
,则可以使用以下方法实现:
In a comments discussion with the OP it became apparent that the real goal was simply to append a view's element to an element on the page. If the element being appended to is #web-leads
, then this can be accomplished with:
$('#web-leads').append(theView.render().el);
这篇关于将数据绑定到Backbone中的DOM的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!