动态地将输入字段添加到Ember模板/路径/视图,使用数据更新模型

时间:2016-02-05 03:15:41

标签: javascript forms ember.js handlebars.js

我对Ember很新,对动态元素有疑问。 我想知道如何动态地将输入字段添加到由按钮点击控制的ember模板/模型中。然后让该信息能够在模型上更新。

我知道如何处理它的静态。我熟悉用动作事件更新控制器和编写处理它们的函数。我之前没有修改过某个动作的视图。

欢迎逻辑和关键字,我不需要确切的代码,但它会有所帮助。

谢谢!

2 个答案:

答案 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