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


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?


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


I have the following action in my route:

		// 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"}}
	<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.


Jsbin showing my problem here.


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:

“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.


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