Modify built-in ember.js view - view

Question

I'm new to ember.js and looking at the built-in views: http://emberjs.com/guides/views/built-in-views/
I understand working with views using a data-template name and editing it from Ember.view.extend, but how do I modify these ember.js built in views? And how do view names work?
For example, in my 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>
Now how might I set the background color of the textarea with the viewName="bodyArea" in my app.js? In the ember.js guide linked to above they show that you can set a viewName property in handlebars but don't show how you might edit it in javascript....

Answer 1

I think you have three questions here:
How do I set a background color on the text area? {{view Ember.TextArea viewName="bodyArea" valueBinding='text' classNames="my-class-name'}} and then use CSS to style "my-class-name".
How do I modify a view with custom behavior?
App.MyTextArea = Em.TextArea.extend({
didInsertElement: function(){
//do something cool here.
}
});
In template:
{{view App.MyTextArea}}
How do I use view name? I'm not sure that is something that is used a lot, but if you define a container view you could access a child view with this.get('myViewName'). As things are more encapsulated within ember a lot of the old uses for viewName no longer seem relevant. Someone else might be able to chime in on this feature.
As an aside you can also use a new short hand for built in views:
{{textarea value=title}} will do the same as {{view Ember.TextField valueBinding='title'}}