How to update page when changes done to model used in #each?

Learning Team
1

Maybe another way to ask the question is how to refresh the #each part of a page.

My scenario is as follows: I return a model from my route with the following structure:

{
   title: "hello",
   tags: [
      {value: "one"},
      {value: "two"}
   ]
}

I am using {{each}} to display the tags. I have a function in the router which I call through a button on the page. If from this function I change the title I can see the title change on the page. However if from this function I add a new tag nothing changes on the page.

I therefore was wondering; is {{each}} the right way to display this type of information? or should I use something else? If each is the correct way how to do this then how to refresh the page after changing the model?

2

Yes. You’re likely changing the data incorrectly. How are you changing the data?

3

I have the following action in my route:

	changeIt(model){
			
		// Showing model before any changes.
		alert("BEFORE: " + JSON.stringify(model));
		// This change is shown from view.
		Ember.set(model, "title", "NEW HELLO", true)
		// This change does not show from view.
		let tags = model.tags;
		tags.push({value: "three"});
		Ember.set(model, "tags", tags, true);
		// However here the model shows as changed. 
		alert("AFTER:" + JSON.stringify(model));
	}

and call this from the view as follows:

	{{#each model.tags as |tag|}}
		{{input type="text" value=tag.value placeholder="Title Here"}}
	{{/each}}
	<button type="submit" {{action 'changeIt' model}}>Change It</button>

If I change anything else in my model (ex: title) I can see the change applied on the view. However can’t get this done with the tags.

4

Jsbin showing my problem here.

5

Hello, found my answer here:

Looks like I had to use pushObject instead of push.

tags.pushObject({value: "three"});

And from this I also found this: emberjs.com/api/classes/Ember.MutableArray.html

“It is important to use the methods in this class to modify arrays so that changes are observable. This allows the binding system in Ember to function correctly.”

So I think this solves my problem.

1 Like
6

Just want to remark that the Guides also cover this, under The Object Model - Enumerables