Javascript 使用“选择图元”控制余烬视图_Javascript_Jquery_Ember.js_Handlebars.js

Javascript 使用“选择图元”控制余烬视图

javascript jquery ember.js

Javascript 使用“选择图元”控制余烬视图,javascript,jquery,ember.js,handlebars.js,Javascript,Jquery,Ember.js,Handlebars.js,我有一个带有3个选项的select表单元素，然后是一个next按钮。单击“下一步”按钮时，应查看用户选择并显示新表单当触发change上的form元素时，当前代码没有提供所需的结果我不认为使用if块是实现这一点的正确方法是否有其他显示/隐藏方法可用于处理表单元素的更改这是jquery中的一个简单概念证明，它绕过了提交btn hbr码 <div> <label>Pick a form?</label> {{view "select" content=m

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

当触发change上的form元素时，当前代码没有提供所需的结果

我不认为使用

if块是实现这一点的正确方法
是否有其他显示/隐藏方法可用于处理表单元素的更改
这是jquery中的一个简单概念证明，它绕过了提交btn

hbr码
<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}}

Handlebar{{{#if}}
助手完全是真/假的-即，您只传递一个值-它不支持比较，甚至不支持相等。因此，设置三个变量以传递给{{{if}}
s：
hbr
或者，如果需要对大量表单执行此操作，则在handlebar中写入/窃取一个
基本上{{if}}，如果传递的参数的计算结果为false、undefined、null或[]（即任何“falsy”值），则不会呈现该块。
您需要使用返回这些“falsy”值之一的属性，以便对其进行计算
下面是一个与您的想法相关的工作示例
车把：
<!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>

你可以在这里查看垃圾箱
你说你没有得到想要的结果-发生了什么？就在我的头顶上，如果你的把手看起来不对劲，它们不应该是拦路器吗？{{{if HoldingValue=='1'}}见表1{{/if}我添加了{if}但仍然不起作用。再说一遍，发生了什么？你有错误吗？你不需要关闭{{/if}}标签吗？谢谢你的提示！缺少正确的如果模式，def会让我打嗝，但仍然会出现如上所述的错误。非常感谢您提供的示例，当我转到您的bin并更改select中的值，然后单击next时，什么都没有发生？是的，我没有连接showForm操作，因为我不知道您的确切意图，请参见上面的评论，您将在该操作中以增量方式添加代码
<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}}

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

<!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>

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