我对Ember很新,对动态元素有疑问。 我想知道如何动态地将输入字段添加到由按钮点击控制的ember模板/模型中。然后让该信息能够在模型上更新。
我知道如何处理它的静态。我熟悉用动作事件更新控制器和编写处理它们的函数。我之前没有修改过某个动作的视图。
欢迎逻辑和关键字,我不需要确切的代码,但它会有所帮助。
谢谢!
答案 0 :(得分:1)
这方面的功能是:点击输入中的保存数据,然后添加另一个输入,同时仍然显示先前的数据。
我有一个包含临时值和数组的模型。
App.ApplicationRoute = Ember.Route.extend({
model:function(){
return {singleVal:'',images:[]}
}
})
我有一个显示空白输入的模板,该值始终指向模型临时值。它还循环model.images并显示任何数据。由于它是用#each编写的,只要模型发生变化,它就会更新:)
{{#each model.images as |info|}}
<label>image:</label>
{{input value=info}}<br/>
{{/each}}
image {{input value=model.singleVal}}<br/><br/>
<button {{action "addField"}}>ADD INPUT FIELD</button>
控制器侦听单击。然后只需将临时值添加到模型中的images数组中。然后它会清除临时变量,因此它不会在重新渲染时显示。
App.ApplicationController = Ember.Controller.extend({
actions:{
addField:function(){
console.log(this.model.singleVal);
this.model['images'].addObject(this.model.singleVal);
this.set('model.singleVal','')
}
}
})
答案 1 :(得分:0)
以下是如何做你所描述的内容的概述:
<强> model.js 强>
Table59860171
<强> template.hbs 强>
import DS from 'ember-data';
const {
attr
} = DS;
export default DS.Model.extend({
someProperty: attr('string')
});
<强> controller.js 强>
<button {{action 'toggleInput'}}>
Toggle that input!
</button>
{{#if isVisible}}
{{input
value=model.someProperty
}}
{{/if}}
和一个余烬演示:https://ember-twiddle.com/3901bf2bf11c65cff1b5?numColumns=1&openFiles=application.route.js%2C