I am very new to Ember and had a question on dynamic elements. I was wondering how to dynamically add input fields to my ember template/model controlled by a button click. Then have that info be able to update on the model.
I know how to handle if its static. Im familiar with updating controller with action events and writing functions to handle them. I have not modified the view on an action before.
logic and keywords are welcomed, I do not need exact code however it will be helpful.
Thanks!
OOOOOOOOOOK after hours of fail i finally got what I needed, understanding ember deprecations was helpful ha. However, I am not sure if this is the best/proper way to handle. Can someone please let me know if there is a better alternative.
The functionality for this is: On click save data from input then add another input, while still showing prior data.
I have a model that holds a temp value and an array.
App.ApplicationRoute = Ember.Route.extend({
model:function(){
return {singleVal:'',images:[]}
}
})
I have a template that displays a blank input which the value is always pointing to the model temp value. It also loops the model.images and displays any data if there. Since its written with an #each it is updated whenever the model changes :)
{{#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>
The controller listens for a click. Then just adds the temp value to the images array in the model. It then clears out the temp variable so it wont show on re render.
App.ApplicationController = Ember.Controller.extend({
actions:{
addField:function(){
console.log(this.model.singleVal);
this.model['images'].addObject(this.model.singleVal);
this.set('model.singleVal','')
}
}
})
get() and set()): ember-twiddle.com/…
{{input value=myVariable}}. The attributes set on the controller are directly available in the controller's template. I've updated the twiddle (haha twiddle is a funny word :).Here's outline of how to do what you've described:
model.js
import DS from 'ember-data';
const {
attr
} = DS;
export default DS.Model.extend({
someProperty: attr('string')
});
template.hbs
<button {{action 'toggleInput'}}>
Toggle that input!
</button>
{{#if isVisible}}
{{input
value=model.someProperty
}}
{{/if}}
controller.js
import Ember from 'ember';
export default Ember.Controller.extend({
isVisible: false,
actions: {
toggleInput() {
this.toggleProperty('isVisible');
}
}
});
And an ember-twiddle demo: https://ember-twiddle.com/3901bf2bf11c65cff1b5?numColumns=1&openFiles=application.route.js%2C
