从实例附加Backbone中的el [英] Appending el in Backbone from an instance
问题描述
我正在尝试从实例中的 el
中添加html
I'm attempting to append the html within el
from instances
var Article1 = Backbone.View.extend({
initialize: function(options) {
console.log('type 1', options)
this.flyIn(options);
},
flyIn: function(options) {
this.$el.find('.superDog').css({
display: 'block'
});
this.$el.find('.superDog').animate({
top: options.top,
left: options.left
}, 3000);
},
render: function() {
},
el: '<div><p class="superDog"></p></div>'
});
var Article1A = new Article1({
color: 'black',
top: '300',
left: '300',
html: 'hello world'
});
var Article1B = new Article1({
color: 'blue',
top: '800',
left: '800',
html: 'Hello Everyone'
});
var Article1C = new Article1({
color: 'blue',
top: '600',
left: '1000',
html: 'Hello No One'
});
我尝试将 append.el
(或 el.append
,不确定是哪种方式), options.html
等。
I've tried putting append.el
(or el.append
, wasn't sure which way it went), options.html
, etc.
是否有可能做我想做的事情或必须使用其他东西?
Is it possible to do what I'm trying to do or do I have to use something else?
推荐答案
花时间阅读Backbone文档:
Take time to read the Backbone documentation:
- the
el
view property is a string (a selector) or DOM element, - the
this.$el
refer to a jQuery object ofthis.el
which is the DOM element. template
is whatever you want, a function or a string mostly.
通过缓存对象而不是一遍又一遍地选择对象来优化jQuery的使用。
Optimize your use of jQuery by caching objects instead of selecting them over and over.
// chain when possible
this.$('.superDog')
.append(options.html)
.css({ display: 'block' });
// cache the object
var $superDog = this.$('.superDog');
// and use it later
$superDog.append(options.html);
// ...more code and then...
$superDog.css({ display: 'block' });
呈现动态列表
制作一个
Rendering a dynamic list
Make a generic view which will serve for every article.
var ArticleView = Backbone.View.extend({
tagName: 'p',
className: 'superDog',
render: function() {
// apply the template
this.$el.html(this.model.get('html'))
.show()
.animate({
top: this.model.get('top'),
left: this.model.get('left')
}, 3000);
return this; // always return this in render.
},
});
然后在通用文章列表视图中使用此视图。
Then use this view inside a generic article list view.
var ArticleList = Backbone.View.extend({
render: function() {
this.$el.empty();
this.collection.each(this.renderArticle, this);
return this;
},
renderArticle: function(model) {
var view = new ArticleView({
model: model
});
this.$el.append(view.render().el);
},
});
并使用Backbone模型和集合来传递数据。
And use Backbone models and a collection to convey the data.
var list = new ArticleList({
collection: new Backbone.Collection([{
id: '1A',
color: 'black',
top: '300',
left: '300',
html: 'hello world'
},
{
id: '1B',
color: 'blue',
top: '800',
left: '800',
html: 'Hello Everyone'
},
{
id: '1C',
color: 'blue',
top: '600',
left: '1000',
html: 'Hello No One'
}
])
});
list.render();
这篇关于从实例附加Backbone中的el的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!