从实例在 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 引用了一个 jQuery 对象this.el 是 DOM 元素.
• template 是你想要的任何东西，主要是函数或字符串.

通过缓存对象而不是一遍又一遍地选择它们来优化您对 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屋！