瞭解灰燼訪問量

Question

我正在尋找一些澄清意見Ember.js

從軌背景的，我試圖忽視任何成見。從我所瞭解的燼架構有5個組件：

• 路由：這是我們定義應用程序狀態的地方。該狀態反映在URL中。我們也可以在這裏定義數據加載。路由類是定義的，並且在啓動時，ember會創建持續應用程序持續時間的路由對象。
• 模型：這是定義對象數據的地方。也可以定義計算的屬性。爲從服務器返回的每個json對象創建一個模型對象。
• 控制器：調節模型和模板/視圖之間的交互。控制器類是定義的，並且在啓動時，ember會創建持續應用程序持續時間的控制器對象。每個控制器類只有一個實例。
• 模板：這些描述了生成的標記。
• Views：這些是與模型相關的特定模板或dom元素。這些用於定義接口事件並將其發送給控制器進行處理。不知道何時創建這些。

作爲一個例子可以說我有一個具有加載在applicationRoute數據EventsController：

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

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

現在在我的模板，而不是遍歷每個和顯示我想遍歷每個信息和創建一個關聯視圖，以便我可以爲每個事件添加交互。我認爲我需要爲每個事件創建一個新的視圖，並讓它顯示在我的模板中。但是，我不確定我在哪裏創建這些視圖。我是否定義了一個視圖類，然後每次使用視圖助手調用它時，ember都會創建一個新的視圖對象？最終，我想使用視圖上的appendTo將我的事件注入到dom中的不同位置。這將被定義在哪裏？

我已經試過閱讀ember.js指南的意見，但它描述了創建單一視圖的上下文。我想我想爲每個事件製作很多視圖，然後動態地與這些對象進行交互。

到目前爲止，燼已經非常聰明，所以我會假設有一個內置的方法來生成這些視圖。畢竟，大多數用戶界面都充滿了需要交互的列表。問題是我試圖做的列表然後我想根據它的屬性傳播給dom。

Answer 1

根據你的代碼，App.EventsController有一個事件列表，現在讓我們說我們希望UI有一個顯示事件的列表，並且對於每個事件，我們希望該視圖具有一個刪除按鈕，該按鈕刪除該事件時用戶點擊

一種方法是使用Ember.CollectionView，集合視圖顧名思義是爲這些類型的需求量身定做的，在許多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")指事件的陣列，而在itemViewClassthis.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 /事件 你」我希望這可以清除一些概念

有關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模板點擊一個按鈕，點擊所有孩子的看法米烏斯季有附加到它的跨度標籤（我非常不擅長給人的例子）

//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> 

appendSpan在的CollectionView