0

私は単一のビューとテンプレートで 2 つのモデルを利用しようとしていますが、この質問に示されている例を試した後: Backbone.js: 複数のモデルを組み合わせた複雑なビュー いくつかのエラーが発生しています。

最初に、ビューモデルを使用して両方のモデルを次のように結合しようとすると:

var model = new Backbone.Model();
model.set({ image: image, person: person });
var view = new Project.Views.Images.ShowView({ model: model });

テンプレート内の何にもアクセスできません。各フィールドは空であるか、関数の文字列表現になっています。これが私のテンプレートです：

<img width="<%= image.width %>" height="<%= image.height %>" alt="<%= image.message %>" src="<%= image.url %>" />
<p><%= image.message %></p>
<h4>by <%= person.name %></h4>

テンプレートが生成する出力は次のとおりです。

<img width="" height="" alt="" src="function () {
  var base = getUrl(this.collection) || this.urlRoot || urlError();
  if (this.isNew()) return base;
  return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + encodeURIComponent(this.id);
}">
<p></p>
<h4>by </h4>

イメージとチェイサーの両方が有効なモデルであることを確認しました。そのうちの 1 つだけをビューに渡すと、正常に機能し、そのモデルがそのビューにバインドされます。

私は他のアプローチも試しました：

var view = new Project.Views.Images.ShowView({ model: image, person: person });

テンプレートを使用すると、次のようになります。

<img width="<%= width %>" height="<%= height %>" alt="<%= message %>" src="<%= url %>" />
<p><%= message %></p>
<h4>by <%= person.name %></h4>

ただし、これにより、person is undefined という javascript エラーがスローされ、テンプレートから person.name を削除すると、残りが適切に表示されます。

私は何を間違っていますか?これらは正しいアプローチですか?

4

2 に答える 2

6

ビューの引数「モデル」について魔法のようなものは何もありませんが、一種の規則として、バックボーンはそれをビューの「モデル」プロパティにコピーします。[1]

ビューにはいくつでも渡すことができますinitialize。関数内で何かを行う必要があるだけです。

私はあなたの2番目の選択肢にリフを付けます：

var view = new Project.Views.Images.ShowView({ image: image, person: person });

ビューの初期化関数で

initialize: function(options) {
    this.image = options.image;
    this.person = options.person;
}

バックボーンで EJS テンプレートを使用することに慣れていませんが、通常、モデルのプロパティが必要な場合は、次の.get()ようにする必要がありますmodel.get('propertyName')

したがって、上記の場合、代わりに次のようにしますimage.get('someImageProperty')。person.get('somePersonProperty')

「モデル」という名前の引数を渡さなかったため、ビューには「モデル」プロパティはありません。

最初の選択肢を使用したい場合は、次の方法で「サブオブジェクト」を参照する必要がありますmodel.get('image').get('someImageProperty')

[1] バックボーンがデフォルトで「モデル」を使用して行うことは、次のとおりです。

initialize: function(options) {
    this.model = options.model;
}

デフォルトでは、これらの名前を持つすべてのオプションに対してこれを行います。

'model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName'

于 2012-03-03T21:53:28.280 に答える
0

EJS は間違っていました。モデルを単一のビュー モデルに結合するとき、次のテンプレートを使用する必要がありました (「属性」オブジェクトに注意してください)。

<img width="<%= image.attributes.width %>" height="<%= image.attributes.height %>" alt="<%= image.attributes.message %>" src="<%= image.attributes.url %>" />
<p><%= image.attributes.message %></p>
<h4>by <%= person.attributes.name %></h4>

私はそれを深く調べていないので、JSON シリアライゼーションが単一のモデルで異なる理由はわかりませんが、そうです。モデルとして画像を渡すだけで、次のように属性オブジェクトを省略できます。

<%= width %>
于 2012-03-04T16:27:27.523 に答える