0

我在从路由处理程序（浏览器应用程序）成功呈现主干.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没有附加子视图的空渲染。我已经单步执行了代码，并且可以看到集合已填充并且项目在那里......但由于某种原因，我的代码没有正确地将它们呈现到视图中，我似乎无法弄清楚为什么或我做错了什么。有任何想法吗？？我对骨干很陌生，所以我确信这段代码写得并不完全正确……欢迎提供建设性的反馈。谢谢。

4

1 回答 1

0

回家后代码如何将其渲染到视图中，然后再次进行预排序？你能提供一些细节吗？重复项目？空视图？

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

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

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;
    }
});

我意识到这个答案相当“宽泛”，但如果我能理解渲染的确切问题，用更多细节来回答会更容易。无论如何，希望它有所帮助:)

于 2012-06-26T16:20:52.640 回答