了解Ember视图

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中定义