Question

单击按钮，我希望在模板中动态添加以下内容。

    {{view App.DatalistText type="text" 
        value=test 
        class="form-control" 
        placeholder="Start Typing" 

        list="names"
        size="50"
    }}
    <datalist id="names" value=te>
      {{#each model}}
        <option {{bindAttr value=name}}>
      {{/each}}
    </datalist>

有一个div

<div id="container"></div>

当用户点击按钮时，div的内容应该变为以下内容，从而呈现数据列表

<div id="container">
  {{view App.DatalistText type="text" 
        value=test 
        class="form-control" 
        placeholder="Start Typing" 

        list="names"
        size="50"
    }}
    <datalist id="names" value=te>
      {{#each model}}
        <option {{bindAttr value=name}}>
      {{/each}}
    </datalist>
 </div>

当我尝试使用时 $("#container").append("{{view App.DatalistText type='text' value=test1 class='form-control' placeholder='Start Typing' list='names' size='50' }} <datalist id='names' value=te> {{#each model}} <option {{bindAttr value=name}}> {{/each}} </datalist>"); - 这不起作用 - 数据主义者不可见必须有其他方法来动态添加它。

App.DatalistText = Ember.TextField.extend({
  attributeBindings: ['list'],
  list : null,
  value:"names",
  selected:function(){
    alert(this.get('te'));
  }
});

每次用户点击按钮时，我基本上都想要一个新的数据列表。

Answer 1

你应该尽可能多地避免使用jQuery和DOM。 append无效，因为您添加的是文本而不是HTMLbars代码。

我不会直接回答您的问题，但会尝试找出更好的解决方案。您希望每次用户点击按钮时都显示Datalist视图 - 为什么？我假设您想要将某种值绑定到此视图（在您的代码中它是test。但是如果您不在控制器中保存此绑定，您将如何对该值执行任何操作？更好的解决方案可能是创建某种Ember.Object（或简单的JS）数组，它将存储绑定中的值。假设你在控制器中有以下属性：

myObjects: []

您可以通过以下方式处理按钮中的点击操作：

actions:
  handleClick: function() {
    myObjects.pushObject({ value: '' }); # use pushObject to make it supported by Ember bindings system 
  }

然后，在你的模板中：

<div id="container">
  {{each object in myObjects}}
    {{view App.DatalistText type="text" 
        value=object.value 
        class="form-control" 
        placeholder="Start Typing" 
        list="names"
        size="50"
    }}
  }}
  <datalist id="names" value=te>
    {{#each model}
      <option {{bindAttr value=name}}>
    {{/each}}
  </datalist>
</div>

这样，每次myObjects中的新对象出现时，模板引擎都会呈现视图。此外，您还可以通过访问Ember.get(myObject[index], "value")来访问用户提供的值。

如果您想知道我使用pushObject take a look here的原因。

在模板Ember Js中动态添加视图

1 个答案: