javascript - Using a POJO to initialize the content of an ArrayController -

javascript - Using a POJO to initialize the content of an ArrayController -

the info template is, time being, set programmatically, using pojo, constant values:

var dropdown_menu = [ { 'text' : 'profile', 'icon' : 'fa fa-eye dd-icon', 'href' : '/profile' }, { 'text' : null }, { 'text' : 'logout', 'icon' : 'fa fa-signout dd-icon', 'href' : '/signup/clear_session_and_logout' }, ];

the next template:

<a class="dropdown-toggle opener" {{bind-attr id="elid"}} data-toggle="dropdown"> <i {{bind-attr class="myclass"}}></i> </a> <ul class="dropdown-menu" role="menu"> {{#each entry}} {{#if entry.text}} <li role="presentation"><a role="menuitem" tabindex="-1" href="{{entry.href}}"><i class="{{entry.icon}}"></i>{{entry.text}}</a></li> {{else}} <li role="presentation" class="divider"></li> {{/if}} {{/each}} </ul>

the next controller:

app.dropdowncontroller = ember.arraycontroller.extend({ elid : cnst.dropdown_elid, content : dropdown_menu, myclass : 'fa fa-power-off fa-2x', });

and next view:

app.dropdownview = ember.view.extend({ templatename: 'navbar/dropdown', controller: app.dropdowncontroller, didinsertelement: function() { var controller = this.get('controller'); var elid = controller.get('elid'); if (debug) { console.log('dropdownview.didinsertelement > activating dropdown elid=%s', elid); } $('#' + elid).dropdown(); } });

but template has no access content defined pojo (because not objectarray?). how can forcefulness content in arraycontroller using info in pojo?

if open using component instead, in javascript:

var dropdown_menu = [ { 'text' : 'profile', 'icon' : 'fa fa-eye dd-icon', 'href' : '/profile' }, { 'text' : null }, { 'text' : 'logout', 'icon' : 'fa fa-signout dd-icon', 'href' : '/signup/clear_session_and_logout' }, ]; app.mydropdowncomponent = ember.component.extend({ elid : cnst.dropdown_elid, menu : dropdown_menu, myclass : 'fa fa-power-off fa-2x', didinsertelement: function() { var elid = this.get('elid'); if (debug) { console.log('dropdownview.didinsertelement > activating dropdown elid=%s', elid); } $('#' + elid).dropdown(); } });

and specify , accompanying template, in app/components/my-dropdown.hbs:

<a class="dropdown-toggle opener" {{bind-attr id="elid"}} data-toggle="dropdown"> <i {{bind-attr class="myclass"}}></i> </a> <ul class="dropdown-menu" role="menu"> {{#each entry in menu}} {{#if entry.text}} <li role="presentation"><a role="menuitem" tabindex="-1" href="{{entry.href}}"><i class="{{entry.icon}}"></i>{{entry.text}}</a></li> {{else}} <li role="presentation" class="divider"></li> {{/if}} {{/each}} </ul>

you can take farther specifying classnames instead of binding them manually in templates. see customising class names.

furthermore, instead of hard coding the same pojo above, can instead pass in value like. see customising attributes.

javascript ember.js handlebars.js