CODEWITHSUNDEEP
ember.jshandlebars.js
DSJ
DSJ

Reputation: 106

Ember js: accessing variables within a {{view}} helper

I have the following template where I loop over a list of objects and want to have a checkbox that is bound to a field isChecked for that object. This needs to be in a view helper in order to get the for tag to work (I think). When I do this I can't seem to figure out how to keep the binding with the isChecked field.

{{#each listEntry in listEntries}}
    {{#view}}
        {{view Ember.Checkbox viewName="checkboxView" checkedBinding="listEntry.isChecked"}}
        <label {{bindAttr for="view.checkboxView.elementId"}}>Option 1</label>
    {{/view}}
{{/each}}

Upvotes: 0

Views: 256

Answers (2)

DSJ
DSJ

Reputation: 106

This is what I ended up doing. The problem I kept having was the need for the binding for the "for" attribute was not working in conjunction with the checked binding. Things were out of scope. If anyone has a better way to accomplish this, please let me know.

{{#each listEntry in ListEntries}}
    {{#if ../isCheckable}}
        {{#with ../listEntry}}
            {{#view listEntryBinding="this"}}
                {{view Ember.Checkbox viewName="checkboxView" checkedBinding="listEntry.isChecked"}}
                <label {{bindAttr for="checkboxView.elementId"}}></label>
            {{/view}}
        {{/with}}
    {{/if}}
{{/each}}

Upvotes: 0

Marcio Junior
Marcio Junior

Reputation: 19128

Your question is similar to that, but that approach not work, I think is because the each helper.

But one of the comments say about nesting your component in the label. I have done that and works.

{{#each listEntry in listEntries}}
      <label>          
          {{view Ember.Checkbox viewName="checkboxView" checkedBinding="listEntry.isChecked"}}          
          Option 1
     </label>    
  {{/each}}

I have created a jsfiddle showing

Upvotes: 2

Related Questions