Ember promised me that it would update my view when the underlying model changed

1

I implemented a template and figured out how to get it to render a nested list of models using an each loop. For some reason, the data is being saved to the backend, however the template never gets updated. What could I be doing wrong?

Note, I had to add the code below to force it to update the todo list and refresh the page by adding it manually. But I don’t think this is how ember works and I was hoping the view would get automatically updated without having to manually update…

<!-- todoItemList.hbs -->
    <article class="todoItemList">
      <form onsubmit="event.preventDefault();">
        {{firstName}} {{lastName}}
        <table class="table">
          <tr>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Title</th>
          </tr>
          {{#each todoItems}}
          <tr>
            <td>
              {{#view App.todoItemItemEditView valueBinding="startDate" class="required" disabledBinding="isDone" }}{{/view}}
            </td>
            <td>
              {{#view App.todoItemItemEditView valueBinding="endDate" class="required" disabledBinding="isDone" }}{{/view}}
            </td>
            <td>
              {{#view App.todoItemItemEditView valueBinding="title" class="required" disabledBinding="isDone" }}{{/view}}
            </td>
          </tr>
    
          {{/each}}
        </table>
    
        {{input type="text" id="new-title" placeholder="Title?" value=newtitle action="addtodoItem"}}
    
        {{input type="text" id="new-start" placeholder="Start?" value=newStart action="addtodoItem"}}
    
        {{input type="text" id="new-end" placeholder="End?" value=newEnd action="addtodoItem"}}
    
        <button {{action "addTodoItem" target="controller"}}>
          Add todo
        </button>
      </form>
    
    </article>




//routes
    this.resource("todoItemList", { path: "/todoItemList/:todoItemList_id" });

App.TodoItemListRoute = Ember.Route.extend({
    model: function (params) {
        return this.store.find('todoItemList', params.todoItemList_id);
    },
});

// controller actions
addTodoItem: function () {
            var newTodoItemListId = this.get('todoItemListId');
            var newStartDate = this.get('newStart');
            var newEndDate = this.get('newEnd');
            var newTitle = this.get('newTitle');

            var todoItem = this.store.createRecord("contractorRate",
                 { startDate: newStartDate, endDate: newEndDate, title: newTitle, todoItemListId: newTodoItemListId });

            todoItem.save().then(function (data) {
                todoItem.set('error', '');
            }, function (data) {
                todoItem.set("error", "Error: " + data.message);
            });

//some code I added to force the newly added todo item to appear on the page without having to reload page inside browser
            var todos = this.get("todoItems");
            todos.pushObject(todoItem);
            this.set("todoItem", todos);

            this.set("newStart", "")
            this.set("newEnd", "")
            this.set("newTitle", "")
        },
2

If data binding isn’t working, you most likely have an issue with your markup where a metamorph is getting placed incorrectly in the DOM.

But you should post a jsfiddle/jsbin that reproduces your issue, it would help us to understand the problem you’re having and help you come up with a solution a lot faster.

 <table class="table">
      <thead>
      <tr>
        <th>Start Date</th>
        <th>End Date</th>
        <th>Title</th>
      </tr>
      </thead>
      <tbody>
      {{#each todoItems}}
      <tr>
        <td>
          {{view App.todoItemItemEditView valueBinding="startDate" class="required" disabledBinding="isDone"}}
        </td>
        <td>
          {{view App.todoItemItemEditView valueBinding="endDate" class="required" disabledBinding="isDone"}}
        </td>
        <td>
          {{view App.todoItemItemEditView valueBinding="title" class="required" disabledBinding="isDone"}}
        </td>
      </tr>
      {{/each}}
      </tbody>
    </table>
3

Hello jasonmit,

Thank you for your response, here is the JSBin: http://jsbin.com/rajepuwo/2/edit?html,js,console,output

4

Looking at chrome tools and the ember inspector, this JSBin has quite a few failed promises and numerous console errors. I would try to break this down a little. Try to piecemeal the code into a working ember app slowly and see at what point does it break. Good luck finding your problem!

1 Like
5

@saad0914 Have you tried inserting a tbody tag in the appropriate place? According to the 1.6 beta release notes, omitting that markup can really confuse the Handlebars engine:

6

The JSBin throws an error.

7

I have made a simpler example in jsbin as I’ve had the same problem. I use a model in a view. I update the model via an input box. The view does not update. http://jsbin.com/yawane/2/edit

8

The each is causing a redraw on change, so the focus is lost gets lost but here he your example working with databinding http://jsbin.com/rixufisa/1/