0

私の質問は、レンダリングされたビューをバックボーンでサブビューする最良の方法についてです。

このトピックに関するブログはたくさんありますが、このユース ケースに適用できる実用的なアイデアを見つけることができませんでした。

裏話

ページの読み込み時に、バックボーンはリモート モデルとリモート ページ テンプレートをフェッチしてレンダリングします。

ページ テンプレートは 3 つのフィールドセットで構成されており、各フィールドセットには多くの読み取り専用データと画像が含まれており、[編集] ボタンが付いています。

+-----------------------+ +-----------------------+
| ID: ViewA             | | ID: ViewB             |
|                       | |                       |
|                       | |                       |
|                  EDIT | |                  EDIT |
+-----------------------+ +-----------------------+
+-----------------------+
| ID: ViewC             |
|                       |
|                       |
|                  EDIT |
+-----------------------+

ユーザーが [編集] をクリックすると、サブビューが作成され、部分 (アンダースコア テンプレート) がフェッチされ、既存のモデルが適用され、最後にフィールドセットの innerHTML が置き換えられます。

これにより、フィールドセット内の以前は読み取り専用のコンテンツが作成され、ユーザーが編集および保存できるようになります。ユーザーによって保存 (またはキャンセル) されると、サーバーにプッシュバックされ、読み取り専用ビューが再レンダリングされます。

議論のために、テンプレートが /templates/edit/<fieldsetid>.html でホストされているとしましょう

既存のコードは次のとおりです。

モデルとコレクション

// Model
window.Page = Backbone.Model.extend();

// Collection
window.PageCollection = Backbone.Collection.extend({
    model: Page, 
    url: '/page/view.json'
});

景色

window.PageView = Backbone.View.extend({

    initialize:function () {
        this.model.bind("reset", this.render, this);
    },

    events:{
        'click fieldset a[role=edit-fieldset]' : 'edit'
    },

    edit: function(e){
        e.preventDefault();
        // @TODO Do some subview awesomeness here?
    },

    render:function (eventName) {
        _.each(this.model.models, function (data) {
            $(this.el).append(this.template({data: data.attributes}));
        }, this);
        return this;
    }

});

ルーター

var AppRouter = Backbone.Router.extend({
    routes:{
        "page/view":"pageView"
    },
    pageView:function (action) {
        this.page = new PageCollection();
        this.pageView = new PageView({model:this.page});
        this.page.fetch();
        $('#content').html(this.pageView.render().el);
    }
});

テンプレートローダー

// Borrowed from:
// http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/
// Should probably move to RequireJS and AMDs

utils.loadTemplate(['PageView'], function() {
    var app = new AppRouter();
    Backbone.history.start();
});

それを念頭に置いて、あなたの考えは何ですか？私は正しい軌道に乗っていますか？私が見るべき別のパターンはありますか？

前もって感謝します。

4

1 に答える 1