CODEWITHSUNDEEP
javascriptember.js
PJC
PJC

Reputation: 997

Ember.js: passing parameters from parent view to nested child view

I am trying to create a simple, nested view. The "child" view is an Ember.Select. The "select" parameters need to come from the parent, and I can't get it to work. How do one do this?

<script type="text/x-handlebars" data-template-name="application">
    {{view App.SelectView contentBindingForSelect="App.names"}}
</script>

<script type="text/x-handlebars" data-template-name="select-view">
    <h1>In SelectView</h1>
    {{view view.childSelectView contentBinding="view.contentBindingForSelect"}}
</script>


window.App = Ember.Application.create();

App.names = ["Yehuda", "Tom"];

App.ApplicationView = Ember.View.extend({
    templateName: 'application',
});

App.SelectView = Ember.View.extend({
    templateName: 'select-view',  
    childSelectView: Ember.Select
});

JSFiddle example: http://jsfiddle.net/kRwcU/1/

Upvotes: 2

Views: 1780

Answers (2)

PJC
PJC

Reputation: 997

I found the issue... I missed this part of the "convention" in Ember: "contentBindingForSelect" as a name does not work. The word "Binding" needs to be kept at the end, for instance: "contentForSelectBinding". I have corrected the JSFiddle. It works fine now.

http://jsfiddle.net/kRwcU/4/

<script type="text/x-handlebars" data-template-name="application">
    <h1>Hello from Ember.js</h1>
    {{view App.SelectView contentForSelectBinding="App.names"}}
</script>

<script type="text/x-handlebars" data-template-name="select-view">
    <h1>In SelectView</h1>
    {{view view.childSelectView contentBinding="view.contentForSelect"}}
</script>

Upvotes: 1

ddb
ddb

Reputation: 1

I am just starting using in ember.js but if you inspect your select element, which is currently empty, you will see that ember has actually rendered your view html inside a select tag. this is obviously junk html so doesn't render correctly.

I suspect that the correct answer is that you don't want to extend ember.select in this way to achieve the functionality require.

Upvotes: 0

Related Questions