Handlebars Each Helper scope is changes property

Question

Hi I am using EmberJS in my application and this is my Application-Template and and Application Controller

I have a property in controller called isEditAble ,But I have an issue If i used to check this property in outside of each helper , this will execute fine. But if i used inside a each helper (isEditAble Property) scope is not looking inside and it is always going to be false.

Could anybody please guide on this how to use property inside a each helper.

ApplicationTemplate:

   //This if executing and textbox is displaying because of isEditAble = true
   {{#if isEditAble}}
        <div style="width: 40px;">
        {{input type=text disabled=isChecked}}
        </div>
    {{/if}}


{{#each checkBoxes}}
      //This if is NOT executing and checkboxes is  NOT displaying
      //Even Though is EditAble true
     {{#if isEditAble}}
        <div style="width: 40px;">
        {{input type=checkbox disabled=isChecked}}
        </div>
    {{/if}}
{{/each}}

Apllication Controller:

 App.ApplicationController = Ember.Controller.extend({
  appName: 'Tag Editor',
  checkBoxes: [
    {id: 1, isChecked: true},
    {id: 2, isChecked: true},
    {id: 3, isChecked: true},
   {id: 4, isChecked: true}
  ],
  isEditAble: true
  });

Answer 1

You can use the block parameters to properly scope the values:

{{#each checkBoxes as |cbox|}}
     {{#if isEditAble}}
        <div>
        {{input type="checkbox" checked=cbox.isChecked}} hello
        </div>
    {{/if}}
{{/each}}

Also notice how type is wrapped in quotes (and also I think that isChecked should toggle the checked property instead of disabled ).

JSbin

edit: As you are using an older version v1.5.1., block parameters aren't available. You can access the parent context by using

 {{#if ../isEditAble}}

or the root context (which in this case is the same as the parent context) with

{{#if @root.isEditAble}}