# Comparison-conditional 'if''s in template loop

**URL:** <https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857>\
**Category:** Proposals\
**Created:** [April 13, 2014, 1:43am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857 "2014-04-13T01:43:39Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![nullsteph](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullsteph/32/15666_2.png) [@nullsteph](https://discuss.emberjs.com/u/nullsteph)\
**Post date:** [April 13, 2014, 1:43am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/1 "2014-04-13T01:43:39Z")

</div>

Ember has a reputation of having a steep learning curve, and though that may be it, what I find online confirms my experience. That experience so far is, that it’s difficult if you want to loop through your model to dynamically build out most of your HTML and let Handlebars write and bind it. As far as I’ve discovered, I’m still stuck with cumbersome JS HTML strings.&nbsp; The simplest example of this is the inability to do…

{{#if model.input.type == ‘select’}}

or, how about passing model values to a helper…

{{#myhelper model[i]}} &nbsp;&nbsp; &nbsp;or &nbsp;&nbsp; {{#myhelper model[i].type}}

```
*I figured this part out. I was confused by Ember.Handlebars vs Handlebars, for the helper method.

```

…or, returning bound Handlebar expressions, so my helper can return this:

{{input action='myAction}}

Without those conveniences, life is pretty difficult as I have to loop through the model and compile my HTML string.&nbsp; So, I’d like to suggest the following:

1. Allowing comparisons in template conditionals.
2. Helpers return bound Handlebars expressions.

My original [SO post][1] on this issue.

[1]: [ember.js - How can I pass the index from a template loop into my helper, and have it return a Handlebars expression - Stack Overflow](http://stackoverflow.com/questions/23003702/how-can-i-pass-the-index-from-a-template-loop-into-my-helper-and-have-it-return)

---

<div class="post-metadata">

**Author:** ![brado](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/brado/32/15067_2.png) [@brado](https://discuss.emberjs.com/u/brado)\
**Post date:** [April 13, 2014, 2:27am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/2 "2014-04-13T02:27:58Z")

</div>

I agree that not being able to do [something like this](http://docs.angularjs.org/api/ng/directive/ngIf), can be annoying at times. Even though many may say you “should” keep this logic out of your views/templates.

However, you could create a {{#whenequal}} block helper, like so: [WhenEqual helper - JSFiddle - Code Playground](http://jsfiddle.net/bradoyler/Js5Xc/)

Idk, maybe a better name would be {{show-if-equal}}, but u get the idea…

---

<div class="post-metadata">

**Author:** ![nullsteph](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullsteph/32/15666_2.png) [@nullsteph](https://discuss.emberjs.com/u/nullsteph)\
**Post date:** [April 13, 2014, 2:59am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/3 "2014-04-13T02:59:34Z")

</div>

I did try that route, but because you can only pass in literals and not values, it didn’t help me. If the {{#blocks}} would resolve the model values, I could do…

{{#myhelper model.type}}// resolve to ‘select’

…and test the string value in the helper to build out the correct HTML. Ah, but then I run into problems returning bound expressions like so…

{{input type=model.type}}{{action ‘myAction’}}

It may be an issue of design and a separation of concerns, in which case I’ll defer to the experts, but I can’t help questioning the utility of that logic in cases like this.

---

<div class="post-metadata">

**Author:** ![opsb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/opsb/32/9475_2.png) [@opsb](https://discuss.emberjs.com/u/opsb)\
**Post date:** [April 13, 2014, 5:12am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/4 "2014-04-13T05:12:02Z")

</div>

I’m not entirely sure what you’re aiming at but it looks like you want to create a component, something(roughly) like:

```
{{form-input value=model}}

App.FormInput = Ember.Component.extend({
  tagName: "input",

  type: function(){
    return value.get("type");
  }.property('value')
});

```

---

<div class="post-metadata">

**Author:** ![nullsteph](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullsteph/32/15666_2.png) [@nullsteph](https://discuss.emberjs.com/u/nullsteph)\
**Post date:** [April 13, 2014, 2:52pm UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/5 "2014-04-13T14:52:25Z")

</div>

Thanks, I’ll take another look the components. My first impression was that I would face the same problems there. This [JsBin](http://emberjs.jsbin.com/rarax/2/edit) shows what I am going for. If the helper could return compiled and bound Handlebars expressions, I think I’d be home free.

---

<div class="post-metadata">

**Author:** ![nullsteph](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullsteph/32/15666_2.png) [@nullsteph](https://discuss.emberjs.com/u/nullsteph)\
**Post date:** [April 14, 2014, 3:14am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/6 "2014-04-14T03:14:45Z")

</div>

I ran into this same problem with Angular too, [as someone else posted][1]. It looks like their solution is to build a custom [Angular.widget][2], which allows building out the form in the HTML code with a custom directive. The ng-if didn’t work either. Maybe something to do with it creating it’s own scope, so this is meaningless as question is not in scope:

```
ng-if="question.type == 'checkbox'

```

it has no awareness of ‘question’, and just returns true.

So far, KnockoutJS is the only thing that made dynamic form building easy. [1]: [Redirecting to Google Groups](https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs) [2]: [Edit fiddle - JSFiddle - Code Playground](http://jsfiddle.net/34y3b/)

---

<div class="post-metadata">

**Author:** ![opsb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/opsb/32/9475_2.png) [@opsb](https://discuss.emberjs.com/u/opsb)\
**Post date:** [April 14, 2014, 6:36am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/7 "2014-04-14T06:36:30Z")

</div>

I think you just want to do something along the lines of:

```
{{#each model.questions}}
  {{render model.type this}}
{{/each}}

App.Radio = Ember.Component.extend({
     tagName: "input",
     type: "radio",        
})

App.Checkbox = Ember.Component.extend({
     tagName: "input",
     type: "radio",        
})

```

I’m afraid I haven’t implemented the radio and checkbox components for you but you should get the general idea i.e. you define each of the different types of input that you need as a component and let the loop decide which to use based on the type property of the question.

By the way, ember doesn’t include a radio button component at the moment (there’s talk of adding one), but for now take a look at this [Ember.js Button Toggle - JSFiddle - Code Playground](http://jsfiddle.net/andersonmat/CM6fK/)

---

<div class="post-metadata">

**Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\
**Post date:** [April 14, 2014, 1:05pm UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/8 "2014-04-14T13:05:36Z")

</div>

You may find [Ember EasyForm](https://github.com/dockyard/ember-easyForm) helpful either to use directly or get inspiration from.

Dynamically rendering things is definitely an easy task with ember, and some of the approaches mentioned here will work great. The approach I would probably use to keep this really simple is to wrap each input in an itemController, then use Em.computed.equal macro to determine what to render:

```auto
App.InputController = Em.ObjectController.extend({
  isRadio: Em.computed.equal('type', 'radio'),
  isCheckbox: Em.computed.equal('type', 'checkbox')
  // etc
})

```

Then in template:

```auto
{{#each itemController="input"}}
  {{#if isRadio}}
     {{input type="radio"}}
  {{/if}}

  {{#if isCheckbox}}
    {{input type="checkbox"}}
  {{/if}}
{{/each}}

```

A lot of figuring out ember is figuring out how to build the data structures your template needs, and an item controller is a nice way to do this for templates without manually looping over your data and adding new properties.

---

<div class="post-metadata">

**Author:** ![nullsteph](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullsteph/32/15666_2.png) [@nullsteph](https://discuss.emberjs.com/u/nullsteph)\
**Post date:** [April 14, 2014, 8:25pm UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/9 "2014-04-14T20:25:32Z")

</div>

Thanks for the tips. I can investigate them after work.  
At first glance, it’s not clear where the JSON would get iterated over. Would this approach allow you to dynamically build out a form defined by big blob of JSON?

---

<div class="post-metadata">

**Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\
**Post date:** [April 14, 2014, 8:38pm UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/10 "2014-04-14T20:38:58Z")

</div>

Yes, the solution I gave above assumes you are iterating over JSON. Although you may need to preprocess your JSON using a computed property in order to make it into the right structure you need.

The each helper in the example is where the json is iterated over. This assumes you have set it to be the model of this template’s controller.

---

<div class="post-metadata">

**Author:** ![opsb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/opsb/32/9475_2.png) [@opsb](https://discuss.emberjs.com/u/opsb)\
**Post date:** [April 14, 2014, 8:43pm UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/11 "2014-04-14T20:43:40Z")

</div>

It might be more obvious with the model mentioned explicitly in the each loop.

```
{{#each model itemController="input"}}
  {{#if isRadio}}
     {{input type="radio"}}
  {{/if}}

  {{#if isCheckbox}}
    {{input type="checkbox"}}
  {{/if}}
{{/each}}

```

---

<div class="post-metadata">

**Author:** ![nullsteph](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullsteph/32/15666_2.png) [@nullsteph](https://discuss.emberjs.com/u/nullsteph)\
**Post date:** [April 15, 2014, 2:58am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/12 "2014-04-15T02:58:04Z")

</div>

Sitll struggling with this. I don’t see where it compares the question.type to determine which input type to build out. I [JSbin’d](http://emberjs.jsbin.com/rarax/3/edit) it, so you can see what I’m after. It should produce 2 checkboxes, 3 radio bottons, and a select DDL. It will also need to iterate over the answers obj to set the attributes and displayed text for each input.

So far it seems the fundamental problem remains; comparing model values on the fly.

---

<div class="post-metadata">

**Author:** ![nullsteph](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullsteph/32/15666_2.png) [@nullsteph](https://discuss.emberjs.com/u/nullsteph)\
**Post date:** [April 15, 2014, 3:05am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/13 "2014-04-15T03:05:09Z")

</div>

I haven’t been able to spend much time testing this out, but I am seeing the same problem, which is resolving the model value in the Render statement. It just comes through as a string. You can see it [here](http://jsfiddle.net/andersonmat/CM6fK/)

---

<div class="post-metadata">

**Author:** ![opsb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/opsb/32/9475_2.png) [@opsb](https://discuss.emberjs.com/u/opsb)\
**Post date:** [April 15, 2014, 3:18am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/14 "2014-04-15T03:18:33Z")

</div>

You were pretty close but the critical thing that was missing was the itemController in the each loop. When you specify the itemController each item in the loop receives it’s own new copy of the controller. It’s also important to use an ObjectController rather than the basic Controller so that the controller can receive the item as it’s model.

I’ve updated your jsbin at [http://emberjs.jsbin.com/juzex/1/edit](http://emberjs.jsbin.com/juzex/1/edit)

---

<div class="post-metadata">

**Author:** ![opsb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/opsb/32/9475_2.png) [@opsb](https://discuss.emberjs.com/u/opsb)\
**Post date:** [April 15, 2014, 3:31am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/15 "2014-04-15T03:31:05Z")

</div>

If you’re referring to the values for the select that’s because you’ve quoted them, if you want to pass a bound value or literal you just omit the quotes i.e.

```
    {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" value=1}}

```

instead of

```
    {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" value="1"}}

```

note you can use also use the binding naming convention (using quotes), i.e.

```
    {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" valueBinding="1"}}

```

---

<div class="post-metadata">

**Author:** ![nullsteph](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullsteph/32/15666_2.png) [@nullsteph](https://discuss.emberjs.com/u/nullsteph)\
**Post date:** [April 15, 2014, 5:04am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/16 "2014-04-15T05:04:09Z")

</div>

Yes, thanks! I think this is it. It’s looking really good. It’s producing the output I want, with out too much work, and no cumbersome JS HTML strings. See the [Updated JSbin](http://emberjs.jsbin.com/winim/1/edit) with the radio buttons wired up to an action.

The ability to bring in another separate controller into the template loop provides the comparison logic I was looking for. This provides a lot of flexibility. I’m looking forward to stepping through the code and exploring this further.

---

<div class="post-metadata">

**Author:** ![opsb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/opsb/32/9475_2.png) [@opsb](https://discuss.emberjs.com/u/opsb)\
**Post date:** [April 15, 2014, 6:00am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/17 "2014-04-15T06:00:13Z")

</div>

Once you start getting the radio, checkboxes etc. wired up you’re probably going to want to introduce a controller for each one, the next step towards that is to break out the individual views, [http://emberjs.jsbin.com/suzalosu/1/edit](http://emberjs.jsbin.com/suzalosu/1/edit)

---

<div class="post-metadata">

**Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\
**Post date:** [April 15, 2014, 4:10pm UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/18 "2014-04-15T16:10:45Z")

</div>

> [@opsb](#):
>
> note you can use also use the binding naming convention (using quotes), i.e.

You may see this around, but it’s slowly being deprecated in favour of quoting or not quoting as appropriate:

```auto
{{some-helper fooBinding="bar"}}
{{some-helper foo=bar}}

```

So those two are equivalent, they will both set foo to be the _value_ of the `bar` property. However, you should prefer the latter one in new code.

Contrast with the following, which sets foo to be the _string_ `"bar"`

```auto
{{some-helper foo="bar"}}

```

---

<div class="post-metadata">

**Author:** ![nullsteph](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullsteph/32/15666_2.png) [@nullsteph](https://discuss.emberjs.com/u/nullsteph)\
**Post date:** [April 17, 2014, 2:49am UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/19 "2014-04-17T02:49:51Z")

</div>

I want to reuse the template and just pass in a diff model. I got this working at home. The [JSbin](http://emberjs.jsbin.com/qereteyu/1/edit) works in Chrome, but it doesn’t seem to work in FF. I think this seals it; all my big questions have been answered. I’m now pretty enthusiastic about Ember.

If there’s anything catastrophic about doing it this way, I’m all ears.

---

<div class="post-metadata">

**Author:** ![opsb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/opsb/32/9475_2.png) [@opsb](https://discuss.emberjs.com/u/opsb)\
**Post date:** [April 17, 2014, 7:40pm UTC](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857/20 "2014-04-17T19:40:17Z")

</div>

Works fine for me in firefox 27.0.1.

I don’t think there’s anything wrong with your general approach but personally(and I think this is more idiomatic ember) I’d prefer to break out the components so that you’d have something like:

```
{{#if isCheckbox}}
    {{checkboxes options=q.answers value=answer on-change="nextQuestion"}}
{{/if}}
<br/>

{{#if isRadio}}
    {{radio options=q.answers value=answer on-change="nextQuestion"}}
{{/if}}
<br/>

{{#if isSelect}}
    {{select options=q.answers value=answer on-change="nextQuestion"}}
{{/if}}

```

[Next page](https://discuss.emberjs.com/t/comparison-conditional-ifs-in-template-loop/4857.md?page=2)