Question

我正在寻找关于Ember.js中的观点的一些澄清

来自铁路背景，我试图忽略任何先入之见。根据我对ember框架的理解，有5个组件：

路由：这是我们定义应用程序状态的地方。状态反映在URL中。我们也可以在这里定义数据加载。路由类已定义，并且在启动时，ember会创建持续应用程序持续时间的路由对象。
模型：这是定义对象数据的位置。也可以定义计算属性。为从服务器返回的每个json对象创建一个模型对象。
控制器：它调解模型和模板/视图之间的交互。定义控制器类，并在启动时，ember创建持续应用程序持续时间的控制器对象。每个控制器类只有一个实例。
模板：这些描述了生成的标记。
视图：这些是与模型相关的特定模板或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视图指南，但它描述了创建单个视图的上下文。我想我想为每个事件创建许多视图，然后动态地与这些对象进行交互。

到目前为止，ember一直非常聪明，所以我认为有一种生成这些视图的内置方法。毕竟，大多数用户界面都充满了需要交互的列表。问题是我试图制作的列表然后根据其属性扩展到dom。

Answer 1

根据您的代码，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>

appendSpan在CollectionView

中定义

了解Ember视图

1 个答案: