12

別のBackboneモデルへの参照である属性を持つ1つのBackboneモデルがあります。たとえば、PersonにはAddressオブジェクトへの参照があります。

Person
  FirstName
  LastName
  Address
    Street
    City
    State
    Zip

これらは、Backboneモデルを拡張するクラスです。したがって、次のようなオブジェクトを作成すると...

var address = new Address({ Street: "123 Main", City: "Austin" });
var person = new Person({ FirstName: "John", Address: address });

Mustacheテンプレートでアクセスする方法がわからないようです。

Hi {{FirstName}}, you live in {{Address.City}}.

明らかに動作しません。Firebugの内部を見ると、Addressはオブジェクトですが、CityはAddressの属性オブジェクト内の属性です。関連するオブジェクトのこれらの属性にアクセスする方法の例が見つかりません。

助けてくれてありがとう！ありがとう！

4

4 に答える 4

8

私はこの問題を次のアプローチで解決することになりました。

テンプレートエンジンをMustache.jsからHandlebars.jsに切り替えました。これにより、パスベースの式を使用して、ネストされたオブジェクトまたは関連付けられたオブジェクトとその属性にアクセスできました。

Hi {{FirstName}}. You live in {{Address.City}}.

ただし、JSONオブジェクトをテンプレートに渡す方法も変更する必要がありました。Backbone.Modelクラスの一部であるtoJSONメソッドを使用していました。しかし、これは関連付けられたアドレスのJSONを正しく生成していませんでした（テンプレートが機能するため）。これは、「attributes」というタイトルのメンバーにアドレス属性を埋めていました。だから、代わりに、私はこれをすることになった...

var jsonForTemplate = JSON.parse(JSON.stringify(person));

これにより、上記の構文を使用してテンプレートがアクセスできるオブジェクトとそれに関連するオブジェクトの「生の」バージョンが得られました。JSON.parseとJSON.stringifyはどちらもjson2.jsの一部です。

于 2011-06-04T18:52:35.510 に答える
6

これを処理するために、ネストされたモデルとコレクションを再帰的にトラバースするdeepToJSONという別のバージョンのtoJSONを作成しました。その後、その関数の戻り値をhandlebars.jsテンプレートに渡すことができます。

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

_.extend(Backbone.Model.prototype, {
  // Version of toJSON that traverses nested models
  deepToJSON: function() {
    var obj = this.toJSON();
    _.each(_.keys(obj), function(key) {
      if (_.isFunction(obj[key].deepToJSON)) {
        obj[key] = obj[key].deepToJSON();
      }
    });
    return obj;
  }
});

_.extend(Backbone.Collection.prototype, {
  // Version of toJSON that traverses nested models
  deepToJSON: function() {
    return this.map(function(model){ return model.deepToJSON(); });
  }
});
于 2011-07-08T23:06:54.203 に答える
5

ネストされたプロパティをサポートするMustacheに基づくテンプレートエンジンであるHandlebarsを使用してみてください。

そうすれば、それはと同じくらい簡単でしょう{{Address/City}}。

テンプレートエンジンを変更したくない場合は、Addressオブジェクトからの結果をフラット化し、プロパティとして直接に渡すことができますPerson。

于 2011-06-04T14:05:19.850 に答える
3

Mustacheで同じことを行う方法は、次のようになります。

やあ

{{FirstName}}, you live in {{#Address}}{{City}} {{/Address}}

それが役に立てば幸い..

于 2011-07-27T15:12:46.430 に答える