【问题标题】:Don't want to use any tag(including the default div tag) in Ember.Collection View不想在 Ember.Collection 视图中使用任何标签(包括默认的 div 标签)
【发布时间】:2013-11-06 23:50:41
【问题描述】:

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

我的车把文件

<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 我猜,这个问题有什么技巧吗?

The 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 只会在数组长度发生变化时触发

【问题讨论】:

  • 你能发布 myEditableFieldView 的代码吗?也许你可以用一个简单的 ` 替换它
  • 您仍然可以访问子视图/父视图,如在此 JSFiddle 中:jsfiddle.net/ZsrWe。如果仍然不够,也许您将不得不使用Ember.ContainerView。但就个人而言,我认为你的模板不是很干净,例如CollectionView 应该更多地用作&lt;tbody&gt; 或直接用作&lt;table&gt;
  • @louiscoquio :我想有表格列,这是一个模糊的例子,我正在使用 & 当然,{{collection}} 的代码在我的 标签中跨度>

标签: ember.js handlebars.js


【解决方案1】:

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

App.MyView = Ember.View.extend({
  tagName: ''
});

【讨论】:

  • 也是假作品。但不是空的。我认为这是在最初提出问题后添加的。
  • tagName: '' 导致更改路由时出错。我的观点并没有因为路线改变而被破坏。 (余烬 1.2)
  • 在 ember 1.9.1 - tagName: '' 有效,但将其设置为 false 无效。
  • 来这里说@Nathan 说了什么^^
  • false@MichaelJohnston 的建议在 ember 1.13.5 (HTMLBars) 中不起作用,而是创建一个 HTML 标记 &lt;false&gt;tagName: '' 为我工作。
【解决方案2】:

AFAIK,在 DOM 中没有“真实存在”的情况下不可能有 Ember.View,但如果您不想添加充当容器的视图(这里是 @ 987654324@).

tagName 设置为null 不起作用,see Ember.View source code

模板:

<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"}];

​ 见this JSFiddle

【讨论】:

  • 好路易斯,+1。感谢您花时间帮助人们:)
  • @louiscoquio:感谢您的回复,但请查看更新后的问题,抱歉我之前没有添加此详细信息
猜你喜欢
  • 1970-01-01
  • 2018-10-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-07-23
  • 2017-04-30
  • 1970-01-01
相关资源
最近更新 更多