Question

我有一个包含3个选项的select表单元素，然后是下一个按钮。单击下一个按钮时，应查看用户选择并显示新表单。

当触发更改表单元素时，当前代码没有给出我想要的结果。

我不认为使用if blocks是实现这一目标的正确方法。

我是否可以使用替代的show / hide方法来处理更改中的表单元素？

这里是jquery中一个简单的概念证明，这个绕过了一个提交btn。

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;
    }
}

Answer 1

Handlebars {{#if}}助手纯粹是真/假 - 即你只传递一个值 - 它不支持比较，甚至是平等。因此要么将三个变量设置为传递给{{#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));
    }
}

或者如果您需要为大量表单执行此操作，请编写/窃取helper that supports comparison operators

Answer 2

如果传递的参数求值为false，undefined，null或[]（即任何“falsy”值），则Handlebars中的{{#if}}基本上不会呈现块。您需要使用一个返回其中一个“假”值的属性才能进行评估

以下是与您的想法相关的工作示例

车把：

<!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];
  }
});

你可以在这里查看垃圾箱 http://emberjs.jsbin.com/xipomaniqo/edit?html,js,output

使用select元素可以控制余视图

2 个答案: