Ember.View - 如何以正确的方式将另一个Ember.View附加到jQuery HTML元素?

时间:2013-07-24 09:28:45

标签: ember.js

Ember.View内可以执行以下操作:

App.ExperimentalView = Ember.View.extend({
  templateName: 'experimental/table',

  click: function (event) {
    var $target = $(event.target).closest('tr'),
        anotherView = Ember.View.create({
          templateName: 'experimental/appendableRow'
        };

    anotherView.appendTo($target);
  }
});

添加<tr/>,只有在点击该元素时才会在Handlebars模板中定义HTML标记吗?

首先我想过使用Ember.ContainerView,然后我重读了文档并偶然发现了这句话:

  

Ember.ContainerView的DOM表示的HTML内容将会   只是其子视图的呈现HTML。

这让我假设我需要一个代表我的表的Ember.ContainerView,用一个子视图来保存真实的<table/>,它再次具有子视图和另一个Ember.ContainerView对象将代表我的表体而不实际渲染<tbody/>元素,这似乎有点奇怪。

修改

这种方法的另一个好处可能是您将能够声明Ember.Mixin,它不仅提供方法/属性,还提供自己的Handlebars模板。因此,我们可以创建类似于FilterableViewMixin的内容,其中包含过滤器的HTML标记以及所有内容,您只需要实现并重置过滤条目。

1 个答案:

答案 0 :(得分:3)

我的做法略有不同。在模板experimental/table中添加experimental/appendableRow中包含的代码段并将其包装在if语句中。然后,如果用户单击表格行,则视图可以将点击委托给控制器,控制器将切换条件,从而显示experimental/appendableRow片段。