8

Ember.js のビューに関する説明を探しています

レールのバックグラウンドから来たので、先入観を無視しようとしています。私が ember フレームワークについて理解していることから、5 つのコンポーネントがあります。

  • ルート: ここで、アプリケーションの状態を定義します。状態は URL に反映されます。ここでデータの読み込みを定義することもできます。ルート クラスが定義され、ember の起動時に、アプリケーションの期間中持続するルート オブジェクトが作成されます。
  • モデル: オブジェクト データが定義される場所です。計算されたプロパティも定義できます。サーバーから返された json オブジェクトごとにモデル オブジェクトが作成されます。
  • コントローラー: これは、モデルとテンプレート/ビューの間の対話を仲介します。コントローラー クラスが定義され、ember の起動時に、アプリケーションの期間中持続するコントローラー オブジェクトが作成されます。各コントローラ クラスのインスタンスは 1 つだけです。
  • テンプレート: これらは、生成されたマークアップを記述します。
  • ビュー: これらは、モデルに関連する特定のテンプレートまたは dom 要素です。これらは、インターフェイス イベントを定義し、処理のためにコントローラに送信するために使用されます。これらを作成する時期がわからない。

例として、applicationRoute にデータがロードされた EventsController があるとします。

ScheduleApp.EventsController = Ember.ArrayController.extend();

ScheduleApp.ApplicationRoute = Ember.Route.extend({
  setupController: function() {
    this.controllerFor('events').set('content', ScheduleApp.Event.find());
  }
});

テンプレートで、それぞれを反復して情報を表示する代わりに、それぞれを反復し、関連付けられたビューを作成して、各イベントにインタラクションを追加できるようにします。イベントごとに新しいビューを作成し、テンプレートに表示する必要があると思います。ただし、これらのビューを作成する場所がわかりません。ビュー クラスを定義すると、ビュー ヘルパーを使用して呼び出すたびに新しいビュー オブジェクトが作成されますか? 最終的には、ビューで appendTo を使用して、イベントを dom の別の場所に挿入したいと考えています。これはどこで定義されますか？

ビューの ember.js ガイドを読んでみましたが、単一のビューを作成するコンテキストについて説明しています。イベントごとに多くのビューを作成し、それらのオブジェクトと動的にやり取りしたいと考えています。

これまでの ember はとてつもなく賢いので、これらのビューを生成する組み込みの方法があると思います。結局のところ、ほとんどのユーザー インターフェイスは、対話を必要とするリストでいっぱいです。問題は、私が作成しようとしているリストであり、その属性に応じて dom に広げたいと考えています。

4

1 に答える 1

7

あなたのコードによるとApp.EventsController、イベントのリストがあります。UI にイベントのリストを表示させたいとしましょう。イベントごとに、ユーザーがクリックしたときにイベントを削除する削除ボタンをビューに持たせたいとしましょう。

コレクション ビューはEmber.CollectionView、その名前が示すように、この種の要件に合わせて調整されています。多くの Ember の例では、ember がビューを自動生成するため、ビューの使用法は定義されていませんが、場合によっては、要件を満たすビューを明示的に定義する

App.EventsView = Ember.CollectionView.extend({
  // It needs a list of data to iterate upon
  // We are binding it to the controllers content data which
  // is a list of events
  contentBinding: "controller.content",
  appendSpan: function(){
    view = Ember.View.create({tagName: 'span'});
    this.get("childViews").forEach(function(child){
      view.appendTo(child);
    });
  },
  // Now we need to also define a view template that will be
  // generated for all the elements in the content array
  // This could in turn be another collection view if required
  // I am going to keep it simple for now
  itemViewClass: Ember.View.extend({
    templateName: "event",
    deleteEvent: function(){
      // Implement Delete
      this.get("content").deleteRecord();
    },
    notifyUser: function(){
      // The record doesn't get deleted as soon as user clicks, the request goes to
      // server and server deletes the record and sends back the response to the
      // client, Hence I'm using an observer here on isDeleted property of the record
      if(this.get('content.isDeleted')){
        alert("Record deleted Successfully");
      }
    }.observes('content.isDeleted')
  })
})

重要な注意CollectionView定義内this.get("content")ではイベントの配列を参照しますが、itemViewClass this.get("content")内では単一のイベント オブジェクトを参照します。

//Defining the template
//Assuming the event model has a name property
<script type="text/x-handlebars" data-template-name="event">
  Name: {{view.content.name}}
  <a {{action deleteEvent target="view"}} href="#">Delete Event</a> 
</script>

application_url/events を押すと、各イベントに削除ボタンがあるイベントのリストが表示されます。これでいくつかの概念が明確になることを願っています

CollectionViewの詳細については、

コメントに従って更新します。

各子ビューに別のビューを追加する場合は、itemViewClass のテンプレートを次のように編集することで実行できます。

<script type="text/x-handlebars" data-template-name="event">
  Name: {{view.content.name}}
  <a {{action deleteEvent target="view"}} href="#">Delete Event</a> 
  {{ view App.SomeOtherView }}
</script>

次のように部分的にすることもできます

<script type="text/x-handlebars" data-template-name="event">
  Name: {{view.content.name}}
  <a {{action deleteEvent target="view"}} href="#">Delete Event</a> 
  {{ partial "somePartial" }}
</script>

または、プログラムで実行したい場合は、EventsView テンプレートのボタンをクリックし、クリックすると、すべての子ビューに span タグを追加する必要があります (例を示すのが非常に苦手です)。

//This is the template for App.EventsController, 
//template-name = "events" => view is App.EventsView and controller App.EventsController
<script type="text/x-handlebars" data-template-name="events">
   <a {{action appendSpan target="view"}} href="#"> Append </a>
</script>

appendSpanCollectionView で定義されている

于 2013-02-28T19:21:58.357 に答える