了解灰烬访问量

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