Question

我在使用路由处理程序（浏览器应用程序）成功查看backbone.js时遇到问题。

我的javascript模块目前设置如下：

$(function () { // DOM ready
    myModule.Init();
});

var myModule = (function () {

// Models
    var DonorCorpModel = Backbone.Model.extend({ });

// Collections
    var DonorCorpsCollection = Backbone.Collection.extend({ model : DonorCorpModel });

// Views
    var DonorCorpsListView = Backbone.View.extend({
        initialize : function () {
            _.bindAll(this, 'render');
            this.template = Handlebars.compile($('#pre-sort-actions-template').html())
            this.collection.bind('reset', this.render);
        },
        render : function () {
            $(this.el).html(this.template({}));

            this.collection.each(function (donorCorp) {
                var donorCorpBinView = new DonorCorpBinView({
                    model : donorCorp,
                    list : this.collection
                });

                this.$('.donor-corp-bins').append(donorCorpBinView.render().el);
            });

            return this;
        }
    });

    var DonorCorpBinView = Backbone.View.extend({
        tagName : 'li',
        className : 'donor-corp-bin',
        initialize : function () {
            _.bindAll(this, 'render');
            this.model.bind('change', this.render);
            this.template = Handlebars.compile($('#pre-sort-actions-donor-corp-bin-view-template').html());
        },
        render : function () {
            var content = this.template(this.model.toJSON());
            $(this.el).html(content);
            return this;
        }
    })

// Routing
    var App = Backbone.Router.extend({
        routes : {
            '' : 'home',
            'pre-sort' : 'preSort'
        },

        initialize : function () {
            // ...
        },

        home : function () {
            // ...
        },

        preSort : function () {
            if (donorCorps.length < 1) {
                donorCorps.url = 'http://my/api/donor-corps';
                donorCorps.fetch();
            }

            var donorCorpsList = new DonorCorpsListView({ collection : donorCorps }).render().el;
            $('#document-action-panel').empty().append(donorCorpsList);

            // ...
        }
    });

// Private members
    var app;
    var donorCorps = new DonorCorpsCollection();

// Public operations
    return {
        Init: function () { return init(); }
    };

// Private operations
    function init () {
        app = new App();
        Backbone.history.start({ root: '/myApp/', pushState: true });
        docr.navigate('/', { trigger: true, replace: true});
    }

}(myModule || {}));

当我运行应用程序时，一切运行正常...它按预期导航到主视图。我有与处理程序的链接设置，以适当地导航到不同的路由，当我运行app.navigate('pre-sort', { trigger: true, replace: true})时，它运行正常，并按预期呈现列表中的预期项目。

当我尝试将返回返回到主视图，然后再次返回预排序视图时问题出现...列表中的项目不会显示在屏幕上因为我期待他们。我只是在没有附加子视图的情况下渲染空pre-sort-actions-template。我已经逐步完成了代码，并且可以看到集合已经填充并且项目在那里......但由于某种原因，我的代码没有正确地将它们渲染到视图中，我似乎无法弄清楚为什么或我做错了什么。有任何想法吗？？我对骨干很新，所以我确信这段代码写的不完全正确......建设性反馈是值得欢迎的。感谢。

Answer 1

回家后如何将代码呈现给视图，然后再次预先排序？你能提供一些细节吗？重复的项目？空视图？

另外，我喜欢在渲染时保留子视图的索引，这样无论范围如何，父视图都可以始终访问它们。我在这里找到了一个非常好的技术：Backbone.js Tips : Lessons from the trenches

我所指的模式的快速概述如下：

var ParentView = Backbone.View.extend({
    initialize: function () {
        this._viewPointers = {};
    },
    render: function (item) {
        this._viewPointers[item.cid] = new SubView ({
            model: item
        });
        var template = $(this._viewPointers[item.cid].render().el);
        this.$el.append(template);
    }
});

var SubView = Backbone.View.extend({
    initialize: function () {
        this.model.on("change", this.render, this);
    },
    render: function () {
        this.$el.html( _.template($('#templateId').html(), this.model.attributes) );
        return this;
    }
});

我意识到这个答案相当“宽泛”，但如果我能理解渲染的确切问题，那么用更具体的答案会更容易回答。希望它有所帮助，无论如何：）

在后续调用路由处理程序时，后台视图无法正确呈现

1 个答案: