Question

我对Backbone.js相对较新，并且难以渲染子视图。我在应用程序的其他部分有子视图正常工作，但我甚至无法在这个中呈现简单的文本。

查看：

Feeduni.Views.UnifeedShow = Backbone.View.extend({
    template: JST['unifeeds/show'],

    tagName: "section",

    className: "unifeed-show",

    render: function() {

        var content = this.template({ unifeed: this.model });
        this.$el.html(content);

        var subView;
        var that = this;    

        this.model.stories().each(function(stories) {
            subView = new Feeduni.Views.StoriesShow({ model: stories });
            that.subViews.push(subView);
            that.$el.find(".show-content").append(subView.render().$el);
    });

        return this;
},
});

子视图：

Feeduni.Views.StoriesShow = Backbone.View.extend({
    template: JST['stories/show'],

    tagName: "div",

    className: 'stories-show',

    render: function() {
        this.$el.text("Nothing shows up here");
        return this;
    },
});

型号：

Feeduni.Models.Unifeed = Backbone.Model.extend({
    urlRoot: "/api/uninews",

    stories: function() {
        this._stories = this._stories || new Feeduni.Subsets.StoriesSub([], {
        parentCollection: Feeduni.all_unifeeds
    });

        return this._stories;
    },

});

文本“这里没有显示”应该显示在“show content”元素中，但我得到的只是：

<section class="unifeed-show">
    <article class="show-content">
    </article>
</section>

Answer 1

子视图名为Feeduni.Views.StoriesShow，但在主视图中，您正在实例化new Feeduni.Views.StoryShow。一致地命名它们，看看你是否还有问题。

Answer 2

下面是对代码的略微修改，显示了管理某些子视图的工作主视图。

var UnifeedShow = Backbone.View.extend({

    // I've hard-coded the template here just for a sample
    template: _.template("Feed: <%= feedName %><br/> <ul class='show-content'></ul>"),

    className: "unifeed-show",

    initialize: function () {
        // Create an array to store our sub-views
        this.subViews = [];
    },

    render: function () {
        var content = this.template(this.model.toJSON());
        this.$el.html(content);

        var subView;
        var that = this;

        var subViewContent = this.$el.find(".show-content");
        this.model.stories().each(function (story) {
            var subView = new StoryShow({
                model: story
            });
            this.subViews.push(subView);
            subViewContent.append(subView.render().$el);
        }, this);

        return this;
    }
});

var StoryShow = Backbone.View.extend({
    tagName: 'li',

    // This template will show the title
    template: _.template('Title: <%= title %>'),

    className: 'stories-show',

    render: function () {
        var content = this.template(this.model.toJSON());
        this.$el.html(content);
        return this;
    },
});

var Unifeed = Backbone.Model.extend({
    stories: function () {
        // I'm just returning the value set on this model as a collection;
        // You may need to do something different.
        return new Backbone.Collection(this.get('stories'));
    }
});


// ================================
// Code below is creating the model & view, then rendering
// ================================


// Create our model
var feed = new Unifeed();

// Put some data in the model so we have something to show
feed.set('feedName', 'A Sample Feed');
feed.set('stories', [{
    title: "Story #1",
    id: 1
}, {
    title: "Story #2",
    id: 5
}]);

// Create our main view
var mainView = new UnifeedShow({
    model: feed,
    el: $('#main')
});

// Render it, which should render the sub-views
mainView.render();

这是一个有效的JSFiddle：

https://jsfiddle.net/pwagener/7o9k5d6j/7/

请注意，虽然这种手动的子视图管理工作正常，但您最好使用类似Marionette LayoutView的内容来帮助管理父视图和子视图。它为这类事情构建了良好的最佳实践，而无需您自己完成。

玩得开心！

如何让Backbone正确渲染子视图？

2 个答案: