从实例附加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:

• el 视图属性是一个字符串（选择器）或DOM元素，


• this。$ el 引用 this.el 的jQuery对象，它是DOM元素。


• template 是您想要的任何东西，主要是函数或字符串。

• the el view property is a string (a selector) or DOM element,
• the this.$el refer to a jQuery object of this.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屋！