修改内置 ember.js 视图

【问题标题】：Modify built-in ember.js view修改内置 ember.js 视图
【发布时间】：2013-06-03 22:55:54
【问题描述】：

我是 ember.js 的新手，正在查看内置视图：http://emberjs.com/guides/views/built-in-views/

我了解使用数据模板名称处理视图并从 Ember.view.extend 对其进行编辑，但是如何修改这些 ember.js 内置视图？视图名称如何工作？

例如，在我的 index.html 中：

 <script type="text/x-handlebars" id="test">
    <h3>Title</h3>
    <p>{{view Ember.TextField valueBinding='title'}}</p>
    <h3>Body</h3>
    <p>{{view Ember.TextArea viewName="bodyArea" valueBinding='text'}}</p>
    <h2>Output</h2>
    {{title}}
    {{text}}
 </script>

现在如何在 app.js 中使用 viewName="bodyArea" 设置 textarea 的背景颜色？在上面链接的 ember.js 指南中，它们显示您可以在车把中设置 viewName 属性，但没有显示如何在 javascript 中对其进行编辑....

【问题讨论】：

标签： view ember.js handlebars.js

【解决方案1】：

我想你在这里有三个问题：

如何设置文本区域的背景颜色？ {{view Ember.TextArea viewName="bodyArea" valueBinding='text' classNames="my-class-name'}} 然后使用 CSS 设置“my-class-name”的样式。
如何修改具有自定义行为的视图？

App.MyTextArea = Em.TextArea.extend({
  didInsertElement: function(){
   //do something cool here.
  }
});

在模板中：

{{查看 App.MyTextArea}}

如何使用视图名称？我不确定这是经常使用的东西，但如果你定义一个容器视图，你可以使用 this.get('myViewName') 访问一个子视图。随着事情被更多地封装在 ember 中，viewName 的许多旧用途似乎不再相关。其他人也许可以加入此功能。

顺便说一句，您还可以为内置视图使用新的简写：

{{textarea value=title}} 的作用与 {{view Ember.TextField valueBinding='title'}}
相同

【讨论】：