Question

如果我从以下开始：

<script type="text/x-handlebars" id="Parent">
  <p>Name: {{input type="text" value=name}}</p>
  <button {{action 'addChild'}}>Add Child</button>
</script>

我想点击按钮产生以下内容：

<script type="text/x-handlebars" id="Parent">
  <p>Name: {{input type="text" value=name}}</p>
  <p>Child1 Name: {{input type="text" value=child1_name}}</p>
  ...
  ...
  ...
  <p>Childn Name: {{input type="text" value=childn_name}}</p>
  <button {{action 'addChild'}}>Add Child</button>
</script>

感谢。

Answer 1

您希望将要添加的html添加到模板中，但是在循环结构中 - 在本例中为{{#each}}。循环将遍历您跟踪的children数组。每当您向children数组添加对象时，Ember将重新呈现循环，为此添加 html。您的模板将如下所示：

  <script type="text/x-handlebars">
    <p>Name: {{input type="text" value=name}}</p>

    {{#each child in children}}
    <p>{{child.name}}: {{input type="text" value=child.value}}</p>
    {{/each}}

    <button {{action 'addChild'}}>Add Child</button>
  </script>

您希望处理addChild操作，以便将对象添加到children数组中。您可以在Controller中执行此操作：

App.ApplicationController = Ember.Controller.extend({
  name: 'Parent Name',
  children: [],

  actions: {
    addChild: function() {
      var children = this.get('children');
      var id = children.length + 1;
      children.addObject({
        name: 'Child Name ' + id,
        value: id
      });
    }
  }

});

这是一个可以试验的功能性JSBin：http://emberjs.jsbin.com/gujomizici/1/edit?html,js,output

如何将html添加到emberjs模板？

1 个答案: