0

私はシングル ページ アプリを調べていて、今日は Marionette.js を使い始めました。アプリケーションの全体的な構造 (モジュール、イベントなど) が非常に効果的であることがわかりました。複雑なデータ構造を使用しているときに、テンプレート (ビュー) を使用してそれらのほとんどを取得する方法がわかりません。私は、追加のロジックとネストを実行できるハンドルバーのようなテンプレートに慣れています。

ネストされたテンプレートを表示するためのベスト プラクティスは何ですか?

これは、ネストされたデータを含むそれほど複雑ではないデータ構造であると考えてください。

[{name:"John", addresses:
  [
    {street:"John Street",city:"New York, NY"},
    {street:"John Street",city:"Madrid, PA"}
  ],
  notes: [{note:"note1"},{note:"note2"}]
  },
  {name:"Alex", addresses:
  [
    {street:"Alex Street",city:"New York, NY"},
    {street:"Alex Street",city:"Madrid, PA"}
  ],
  notes: {}}
]

第 1 レベルの配列をテーブル行として効果的にレンダリングし、内部配列 (「住所」や「メモ」など) を行の個々の列 (たとえば、別のテーブルの形式) にレンダリングする方法。

4

3 に答える 3

0

CollectionViewを使用できます。配列はその としてビューに渡され、 for each 行をcollectionループしてそれらを表示できます。addresses

配列の各要素のビューを作成しませaddressesん。それらを自分で管理する必要がないためです。メイン ビューが表示されたときに表示されます (右?)。

だから、あなたはこのようなものを持つことができます

NoUsers = Backbone.Marionette.ItemView.extend({
  template: "#no-users-template"
});

渡されたcollectionが空の場合に使用されます

User = Backbone.Marionette.ItemView.extend({});

これは、単一のユーザー (最上位の配列要素) がどのようにレンダリングされるかを定義します。ハンドルバーを使用してaddresses、次のようなループを実行できます。

<div>
  {{ #each addresses }}
  <span>{{ street }} - {{ city }}</span>
  {{/each}}
</div>

Users = Backbone.Marionette.CollectionView({
  itemView: User,
  emptyView: NoUsers
});

詳細な例については、Marionette の作成者である DErick Bailey から作成されたこのサンプル アプリを参照してください。

于 2013-09-20T11:04:09.377 に答える
0

Marionette は、オブジェクトのコレクションをレンダリングする Collection および CompositeViews を提供します。CompositeView を使用してテーブルを効果的にレンダリングできますCompositeViewのドキュメントを参照してください- コンポジットビューを使用してテーブルをレンダリングする方法の例があります。

複雑なネストされた構造をレンダリングするには、ネストされたフィールドの例を参照できるようにするため、Handlebars が最適です。{{x.y}}

于 2013-09-20T10:59:37.800 に答える
0

アンダースコアを使用している場合は、次のことができます

<%= Marionette.Renderer.render('#your-template', {
    your: data,
    goes: here
}) %>

またはより良い例は

<% _.each(someArrayOnModel, function(item) { %>
    <%= Marionette.Renderer.render('#templateForItem', item) %>
<% }); %>
于 2013-09-20T20:02:05.317 に答える