model-view-controller - 了解 Ember View

Question

我正在寻找有关 Ember.js 中 View 的一些说明

来自 Rails 背景，我试图忽略任何成见。根据我对 ember 框架的理解，有 5 个组件:

Routes:这是我们定义应用程序状态的地方。状态反射(reflect)在 URL 中。我们也可以在这里定义数据加载。定义了路由类，并在启动时 ember 创建在应用程序期间持续的路由对象。

模型:这是定义对象数据的地方。还可以定义计算属性。为从服务器返回的每个 json 对象创建一个模型对象。

Controller :这调解模型和模板/ View 之间的交互。 Controller 类被定义，并且在启动时 ember 创建 Controller 对象，这些对象在应用程序的持续时间内持续存在。每个 Controller 类只有一个实例。

模板:这些描述生成的标记。

View :这些是与模型相关的特定模板或 dom 元素。这些用于定义接口(interface)事件并将它们发送到 Controller 进行处理。不确定何时创建这些。

例如，假设我有一个 EventsController，它在 applicationRoute 上加载了数据:

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

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

现在在我的模板中，而不是遍历每个并显​​示我想要遍历每个并创建关联 View 的信息，以便我可以向每个事件添加交互。我想我需要为每个事件创建一个新 View 并将其显示在我的模板中。但是，我不确定我在哪里创建这些 View 。我是否定义了一个 View 类，然后每次我使用 View 助手调用它时，ember 都会创建一个新的 View 对象？最终我想在 View 上使用 appendTo 将我的事件注入(inject)到 dom 中的不同位置。这将在哪里定义？

我已经尝试阅读 ember.js View 指南，但它描述了创建单个 View 的上下文。我想我想为每个事件制作许多 View ，然后与这些对象动态交互。

到目前为止，ember 已经非常聪明，所以我认为有一个内置的方法可以生成这些 View 。毕竟，大多数用户界面都充满了需要交互的列表。问题是我试图制作的列表然后我想根据它的属性分布在 dom 上。

Answer 1

根据您的代码，App.EventsController有一个事件列表，现在让我们说我们希望 UI 显示一个事件列表，并且对于每个事件说我们希望 View 有一个删除按钮，当用户单击时删除事件

一种方法是使用 Ember.CollectionView ，顾名思义， Collection View 是为这些需求量身定制的，在许多 Ember 示例中，没有定义 View 的使用，因为 ember 会为您自动生成它，但在某些情况下，我们可能需要显式定义一个 View 来满足我们的需求要求

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 的更多信息|

根据评论更新:

如果要为每个 subview 附加另一个 View ，可以通过编辑 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 模板中的一个按钮，然后单击所有 subview 必须附加一个 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 中定义