在 Backbone.js 中插入 DOM 子视图时遇到问题答案

【问题标题】：Trouble inserting to DOM child views in Backbone.js在 Backbone.js 中插入 DOM 子视图时遇到问题
【发布时间】：2012-03-21 06:29:13
【问题描述】：

试图让我从 forEach 创建的子视图 (OfferMarketView) 回到 DOM。做这个的最好方式是什么？我无法让以下工作。

// DEFINE VIEW
var OfferView = Backbone.View.extend({
    initialize: function () {
        this.model = new Offers();
        this.model.fetch();
        this.model.on('change', this.modelChange);
        this.model.on('change', this.render);
        this.modelChange = function () {
            alert('model changed');
        };
        this.render();
    },
    render: function () {
        var container = this.el;
        this.model.forEach(function (s) {
            var view = new OfferMarketView({
                id: "container" + s.get('name').toLowerCase().replace(/\s*/g, '')
            });
            $("#offerCol").append(view.el);
        });
        return this;
    }
});
var OfferMarketView = Backbone.View.extend({
    tagName: "div",
    className: "classname",
    events: {},
    render: function() {
    }
});


// INITIALISE VIEW
offerView = new OfferView();

【问题讨论】：

我不知道您希望获得什么。我看到OfferMarketView.render 是空的，也永远不会被调用.. 所以OfferMarketView.el 将永远是<div class="classname"></div>。然后你要做的是遍历看起来像Collection 的this.model 并将你的空<divs> 附加到#offerCol 元素。您能告诉我们您的期望是什么吗？

标签： javascript model-view-controller backbone.js

【解决方案1】：

你必须在添加元素之前渲染你的视图：

$("#offerCol").append(view.render().el);

请注意，您必须在 render 方法中添加 return this; 以便它可以链接：

var OfferMarketView = Backbone.View.extend({
    tagName: "div",
    className: "classname",
    events: {},
    render: function() {
        return this;
    }
});

【讨论】：

我在控制台中遇到错误，OfferMarketView 不是构造函数...我做错了什么？
您确定在声明 OfferMarketView 视图之前没有实例化您的 OfferView 吗？
我不知道为什么很多教程都使用 .append(view.el)。调用 render() 绝对是答案。