如何让骨干正确渲染子视图

How do I get Backbone to render the subView properly?

本文关键字：视图      更新时间：2023-09-26

我对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;
    },
});
文本"此处未显示任何内容"应该

显示在"显示内容"元素中，但我得到的只是：

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

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

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/

请注意，虽然这种手动的子视图管理工作正常，但最好使用木偶布局视图之类的东西来帮助管理父视图和子视图。 它为这类事情建立了良好的最佳实践，而无需您自己做。

玩得愉快！

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

相关文章：