8

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

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

  • Routes：这是我们定义应用程序状态的地方。状态反映在 URL 中。我们也可以在这里定义数据加载。路由类被定义，并且在启动时 ember 创建在应用程序期间持续的路由对象。
  • 模型：这是定义对象数据的地方。还可以定义计算属性。为从服务器返回的每个 json 对象创建一个模型对象。
  • 控制器：这调解模型和模板/视图之间的交互。控制器类被定义，并且在启动时 ember 创建控制器对象，这些对象在应用程序的持续时间内持续存在。每个控制器类只有一个实例。
  • 模板：这些描述生成的标记。
  • 视图：这些是与模型相关的特定模板或 dom 元素。这些用于定义接口事件并将它们发送到控制器进行处理。不确定何时创建这些。

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

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 上。

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>

appendSpan在 CollectionView 中定义

于 2013-02-28T19:21:58.357 回答