CODEWITHSUNDEEP
ember.js
AyKarsi
AyKarsi

Reputation: 9675

Create reusable Ember.Select control with parameters

I would like to create a specialized select control view, which should simply add some functionality. For simplicity I would just like to be able to add a title.

The Control/View:

window.App.ControlsSelectView = Ember.View.extend({
    templateName: 'controls/SelectView',
    title:"Hello Control",
    contentBinding: null
 });

The matching html:

<div class="sub_heading">
    <h2>{{title}}</h2>
</div>
<div class="inner_12 input_wrapper custom_select">
    {{view Ember.Select
           multiple="true"
           contentBinding= "contentBinding" // how to pass parameters through?
           selectionBinding="content.tempSelectedFunctions"
           optionLabelPath="content.displayname"
           optionValuePath="content.id"
    }}
</div>

Usage should be something like this: 

{{ view App.ControlsSelectView 
    contentBinding="content.data.responsibilities" 
    selectionBinding="content.tempSelectedFunctions"
    title="content.responsibilitTitle"
}}

Problem is, that it doesn't work like that. Is the above possible? Or is there a better pattern to create simple reuasble controls?

Upvotes: 0

Views: 457

Answers (1)

AyKarsi
AyKarsi

Reputation: 9675

This post helped me to get on the right track:

get content in view from ContentBinding

Inside the html of the control view I need to reference the view parameters with view.propertyname

Working solution:

HTML:

<div class="sub_heading">
    <h2>{{view.title}}</h2>
</div>
{{#if view.content}}
    <div class="inner_12 input_wrapper custom_select">
        {{view Ember.Select
               multiple="view.multiple"
               contentBinding= "view.content"
               selectionBinding="view.selection"
               optionLabelPathBinding="view.optionLabelPath"
               optionValuePathBinding="view.optionValuePath"
        }}
    </div>
{{/if}}

ControlView 

window.App.ControlsSelectView = Ember.View.extend({
    templateName: 'controls/SelectView'

});

Usage: 

{{view App.ControlsSelectView
        title = "Function"
        multiple="true"
        contentBinding="content.data.functions"
        selectionBinding="content.tempSelectedFunctions"
        optionLabelPath="content.displayname"
        optionValuePath="content.id"

}}

Upvotes: 1

Related Questions