Use select element to control ember views

Question

I have a select form element with 3 options, and then a next button. When the next button is clicked it should look at the users selection and show a new form.

The current code is not giving me the desired results when the form element on change is fired.

I don't think using if blocks is the proper way to achieve this.

Is there an alternate show/hide method I could use to handle a form elements on change?

here is a simple proof of concept in jquery, this one bypasses a submit btn.

http://jsfiddle.net/dfYAs/

hbr code

<div>
<label>Pick a form?</label>
{{view "select" content=myForms class="formSel"}}
</div>

<div>
    <a {{action 'showForm'}}role="button">Next</a>
</div>
</form>

  {{#if showForm1}}
    <form>see form 1</form>
  {{/if}}

  {{#if showForm2}}
    <form>see form 2</form>
  {{/if}}

  {{#if showForm3}}
    <form>see form 3</form>
  {{/if}}

ember code

myForms: ['1', '2', '3'],
showForm1: false,
showForm2: false,
showForm3: false,

actions: {
  var formSel = $('.formSel');
    showForm: function() {
      var showForm1 = this.get('formSel.val()', []) == 1;
      var showForm2 = this.get('formSel.val()', []) == 2;
      var showForm3 = this.get('formSel.val()', []) == 3;
    }
}

You say you aren't getting the desired results - what *is* happening? Just off the top of my head, your handlebar `if`s don't look right - shouldn't they be block helpers? {{#if holdingsValue === '1'}}
see form 1
{{/if}} — Tom Jardine-McNamara, Jul 09 '15 at 20:04
Again, what *is* happening? Are you getting errors? Do you not need closing {{/if}} tags? — Tom Jardine-McNamara, Jul 09 '15 at 20:10
thanks for those tips! missing the right `if pattern` was def going to give me hiccups, but still getting same err as above. — ndesign11, Jul 09 '15 at 20:13

score 1 · Answer 1 · edited May 23 '17 at 12:14

The Handlebars {{#if}} helper is purely true/false - i.e. you just pass a value - it doesn't support comparisons, even equality. So either set three variables to pass to the {{#if}}s:

hbr

<div>
    <label>Pick a form?</label>
    {{view "select" content=myForms}}
</div>

<div>
    <a {{action 'showForm'}}role="button">Next</a>
</div>
</form>

{{#if showForm1}}
  <form>see form 1 </form>
{{/if}}

{{#if showForm2}}
  <form>see form 2</form>
{{/if}}

{{#if showForm3}}
  <form>see form 3</form>
{{/if}}

ember.js

myForms: ['1', '2', '3'],
actions: {
    showForm: function() {
        var showForm1 = this.get('myForms.val()', []) == 1;
        var showForm2 = this.get('myForms.val()', []) == 2;
        var showForm3 = this.get('myForms.val()', []) == 3;
        console.log(this.get(holdingsValue));
    }
}

or if you need to do this for a large number of forms, write/steal a helper that supports comparison operators

blackmind · Answer 2 · 2015-07-09T20:42:29.857

Basically {{#if}} in Handlebars will not render the block if the argument passed evaluates to false, undefined, null or [] (i.e., any "falsy" value). You need to use a property that returns one of these "falsy" values in order for it to evaluate

Here is a working example related to your idea

Handlebars:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.13.2/ember-template-compiler.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.13.2/ember.debug.js"></script>
</head>
<body>

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
<form>
<div>
  <label>Pick a form?</label>
  {{view "select" content=model}}
</div>

<div>
    <a {{action 'showForm'}}role="button">Next</a>
</div>
</form>

{{#if holdingsValue1}}
  <form>see form 1 </form>
{{/if}}

{{#if holdingsValue2}}
  <form>see form 2</form>
{{/if}}

{{#if holdingsValue3}}
  <form>see form 3</form>
{{/if}}
  </script>

</body>
</html>

Ember.js

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexController = Ember.Controller.extend({
  holdingsValue1: true,
  actions: {
    showForm: function() {
   //This is where you would increment the form value
    }
}

});

App.IndexRoute = Ember.Route.extend({
     setupController: function(controller, model) {
    controller.set('model', model);
  },
  model: function() {
    return [1, 2, 3];
  }
});

You can check out the bin here http://emberjs.jsbin.com/xipomaniqo/edit?html,js,output

thankyou very much for the example, when i goto your bin, and change the value in the select, and hit next, nothing happens? — ndesign11, Jul 09 '15 at 21:23
Ya, I didn't wire up the showForm action, since i didn't know your exact intent see my comment above, you would add code in increment in that action — blackmind, Jul 09 '15 at 21:26

Use select element to control ember views

2 Answers2