4

标题可能听起来很愚蠢，请考虑以下代码

我的车把文件

<table id="main-table">
  <tr>
    <td>
      <h1>Some Text</h1>
    </td>
    {{#collection myCollectionView}}
    <td>
      <table>
        <tr><td>{{view.someProperty}}</td></tr>
      </table>
    </td>    
    {{/collection}}
  </tr>
</table>

我的查看文件

myCollectionView = Ember.CollectionView.extend({
  contentBinding: "myController.someArray",
  //someArray has say 4 elements
  itemViewClass: Ember.View.extend()
})

我希望它在#main-table 内呈现4 个表，而是将它们呈现在#main-table 之外，因为它将我包含itemViewClass在默认div标记内。我只能更改tagName属性但不能将其设置为 nil 我猜，这个问题有什么技巧吗？

JSFiddle

回应第一个答案 {{each}} 的问题是，我使用 EditableField 如下：（
听起来很清楚，可编辑字段是在双击时将 div 更改为文本字段并返回 div 标签的字段专注于使用 ember 构建的简单小部件）

更新的车把文件

<table id="main-table">
  <tr>
    <td>
      <h1>Some Text</h1>
    </td>
    {{#collection myCollectionView}}
    <td>
      <table>
        <tr><td>{{view.myEditableField valueBinding="view.content"}}</td></tr>
      </table>
    </td>    
    {{/collection}}
  </tr>
</table>

更新的视图文件

myCollectionView = Ember.CollectionView.extend({
  contentBinding: "myController.someArray",
  //someArray has say 4 elements
  itemViewClass: Ember.View.extend({
    alertFunc: function(){
      alert("content did change");
    }.observes('content')
  })
})

我希望观察者在可编辑字段之一中的值发生更改时触发，以便我可以更新数据库中的记录。我们可以使用 {{each}} 助手完成这件事吗？此外，arrayContentDidChange 只会在数组长度发生变化时触发

4

2 回答 2

8

可以在 Ember 视图中执行此操作

App.MyView = Ember.View.extend({
  tagName: ''
});
于 2013-11-06T15:50:41.083 回答
4

AFAIK，在 DOM 中没有“真实存在”的情况下不可能有 Ember.View，但是{{each}}如果您不想添加充当容器的视图（此处为 a Ember.CollectionView），则可以使用帮助程序。

设置tagName为null不起作用，请参阅 Ember.View 源代码。

模板：

<script type="text/x-handlebars">
    <table id="main-table">
  <tr>
    <td>
      <h1>Some Text</h1>
    </td>
    {{#each App.content}}
      <td>
        <table><tr><td>{{name}}</td></tr></table>
      </td>
    {{/each}}
  </tr>
</table>
</script>​

代码：

App = Ember.Application.create();
App.content = [{name: "foo"}, {name: "bar"}, {name: "baz"}];

见这个 JSFiddle。

于 2012-08-30T12:03:36.983 回答