0

ルート ハンドラー (ブラウザー アプリケーション) から 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レンダリングを取得しています。コードをステップ実行したところ、コレクションにデータが入力され、項目がそこにあることがわかります...しかし、何らかの理由で、私のコードはそれらをビューに適切にレンダリングしておらず、理解できないようですなぜ、または私が間違っているのか。何か案は??私はバックボーンにかなり慣れていないので、このコードが完全に正しく書かれていないと確信しています...建設的なフィードバックを歓迎します. ありがとう。

4

1 に答える 1

0

家に帰った後、コードがどのようにビューにレンダリングされ、次に事前に並べ替えられますか? その詳細を教えていただけますか?重複アイテム?空のビュー?

また、サブビューをレンダリングするときにサブビューのインデックスを保持して、親ビューがスコープに関係なく常にサブビューにアクセスできるようにしたいと考えています。ここで、これに関する非常に優れたテクニックを見つけました: Backbone.js のヒント : 塹壕からの教訓

私が参照しているパターンの簡単な概要は次のとおりです。

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 に答える