[解決済み] Backbone.jsのネストされたモデル、アプローチ方法

質問

サーバーから以下のようなJSONが提供されました。これを使用して、私はネストされたモデルを持つモデルを作成したいと思います。これを実現する方法はどれなのか、よくわかりません。

//json
[{
    name : "example",
    layout : {
        x : 100,
        y : 100,
    }
}]

これらを以下のような構造を持つ2つのネストしたバックボーンモデルに変換して欲しいのです。

// structure
Image
    Layout
...

というわけで、Layoutモデルを以下のように定義します。

var Layout = Backbone.Model.extend({});

しかし、イメージモデルを定義するために、以下の2つのテクニックのどちらを使うべきでしょうか？以下のAかBか？

A

var Image = Backbone.Model.extend({
    initialize: function() {
        this.set({ 'layout' : new Layout(this.get('layout')) })
    }
});

または B

var Image = Backbone.Model.extend({
    initialize: function() {
        this.layout = new Layout( this.get('layout') );
    }
});

どのように解決するのですか？

私はBackboneアプリケーションを書いている間、非常に同じ問題を抱えています。埋め込み/ネストされたモデルを処理する必要があります。私は非常にエレガントな解決策だと思ったいくつかの調整を行いました。

はい、オブジェクト内の属性を変更するためにparseメソッドを修正することができますが、そのすべてが実際にはかなり保守性のないコードであり、解決策というよりもハックのように感じられます。

あなたの例に対して私が提案するものは、以下のとおりです。

まず、レイアウトモデルをこのように定義します。

var layoutModel = Backbone.Model.extend({});

そして、これがあなたのイメージモデルです。

var imageModel = Backbone.Model.extend({

    model: {
        layout: layoutModel,
    },

    parse: function(response){
        for(var key in this.model)
        {
            var embeddedClass = this.model[key];
            var embeddedData = response[key];
            response[key] = new embeddedClass(embeddedData, {parse:true});
        }
        return response;
    }
});

私はモデル自体に手を加えていませんが、単にパースメソッドから目的のオブジェクトを返していることに注意してください。

これにより、サーバーから読み込む際に、ネストされたモデルの構造が保証されるはずです。さて、保存や設定がここでは扱われていないことにお気づきでしょう。なぜなら、適切なモデルを使って明示的にネストされたモデルを設定することに意味があると思うからです。

このように

image.set({layout : new Layout({x: 100, y: 100})})

また、実際にはネストしたモデルでparseメソッドを呼び出していることに注意してください。

new embeddedClass(embeddedData, {parse:true});

の中にいくつでもネストしたモデルを定義することができます。 model フィールドに必要な数だけネストしたモデルを定義することができます。

もちろん、ネストしたモデルをそれ自身のテーブルに保存するところまでやりたいのであれば これは十分ではないでしょう。しかし、オブジェクトを全体として読み、保存する場合には、この解決策で十分でしょう。