0

私は Rails 開発者で、EmberJS を初めて使用します。UI の実装は JavaScript コードが多く、Ember を試してみたいので、UI の実装について少し助けを求めます。

これが私が達成したいことです

ここに画像の説明を入力

GraphEditor をクリックすると、新しいアクターが追加され、新しいアクターのポップオーバー フォームが表示されます

問題は、UI 要素が SVG タグで作成されており、ズーム可能、パン可能などです。

私の問題は

  • アクターとリレーションを追跡するのはどのコントローラーですか? SocialNetwork ショー ビューからそれらを呼び出す方法は?
  • Actors ビューと Relations ビューをレンダリングする方法は? {{render}} は何度も機能せず、ビュー プロパティをモデル プロパティにバインドする必要があります (レンダリング パーシャルの種類: 'actor'、actor: Actor)
  • Actor/Relation Details ポップオーバー ビューを作成するにはどうすればよいですか?
  • これを達成するために、ビュー階層をどのように構築しますか? 私の提案は、このネストされたビュー階層を持つことです。

ここに画像の説明を入力

一般的な質問で申し訳ありませんが、データにバインドされた複雑なビューであり、これを実装する方法がわからないため、これを Ember に実装しています。最初の洞察は役に立ちます

4

1 に答える 1

1

アクターとリレーションを追跡するのはどのコントローラーですか?

おそらく、ActorsControllerアクターのリストを持つ配列コントローラーになり、そのリストはSocialNetworkルートのsetupControllerフックに取り込まれます。モデル データがどのように構造化されているかに応じて、リレーションに対して同じことができるか、アクターを介してアクセスできる可能性があります。

SocialNetwork ショー ビューからそれらを呼び出す方法は?

needs: ['actors'] toSocialNetworkController controllers.actors を追加so that the propertyすると、利用可能になります。

Actors ビューと Relations ビューをレンダリングする方法は?

ヘルパーを使用{{each}}してアクター/関係のリストをループし、 itemController プロパティを指定して、各アクターがのインスタンスにラップされるようにしますActorController

{{#each actor in controllers.actors itemController="actor"}}
  {{actor.name}} {{#if actor.isAwesome}}***AWESOME****{{/if}}
{{/each}}

Actor/Relation Details ポップオーバー ビューを作成するにはどうすればよいですか?

ポップオーバーではないふりをして、通常のマスター/詳細ビューを行っているかのように、一部の div に詳細が表示されるようにします。それが機能したら、詳細ビューの didInsertElement fx をカスタマイズして、代わりにポップアップに表示されるようにします。

これを達成するために、ビュー階層をどのように構築しますか?

これを行うには多くの方法があります。これは (テストされていない) スケッチです。私は、GraphEditorView が SVG の処理を​​行うと想定しています。それ以外の場合、そのビューは実際には必要ありません。

<!-- social_network.hbs -->
<h3>Network Name: {{name}}</h3>
{{view "App.GraphEditorView"}}

<!-- graph_editor.hbs -->
<h3>Network Name: {{name}}</h3>
{{#each actor in controllers.actors itemController="actor"}}
  <g class="actor" {{action showDetails}}>
    <circle></circle>
    <text>{{actor.name}}</text>
  </g>
  {{#if actor.isShowingDetails}}
    {{render actorDetails actor}}
  {{/if}}
{{/each}}

一般的な質問で申し訳ありませんが、データにバインドされた複雑なビューであり、これを実装する方法がわからないため、これを Ember に実装しています。最初の洞察は役に立ちます

心配ない。たぶん、この関連記事を参照してください。これらの概念が他の誰かのアプリにどのように適用されるかを確認するのに役立つかもしれません: ember.js はアイテムのリストを表示し、各アイテムには独自のビュー/コントローラーがあります

于 2013-04-16T16:51:49.300 に答える