Todo items are not saved on checkbox change testing with a backend app

[jmbejar]

Hi,

I was testing this ember-cli example project with a Rails API only application. I found an issue when clicking on the checkboxes to complete items where the isComplete attribute is not updated in the backend server. It seems to happen because there is no code invoking save when checkboxes changes in the UI.

I know this is not a problem if you're running this application with the provided data adapter, however it may be nice to have the application prepared to be integrated with backend applications.

#6 fixes the problem. We also tested with the following code that seems to be the smallest change to have this issue fixed (thanks @juanazam for this code!):

diff --git a/app/components/todo-item/component.js b/app/components/todo-item/component.js
index 445b49d..9a04b85 100644
--- a/app/components/todo-item/component.js
+++ b/app/components/todo-item/component.js
@@ -9,6 +9,18 @@ export default Ember.Component.extend({
     this.set('isEditing', false);
   },

+  completeTodo: Ember.computed({
+    get() {
+      return this.get('todo.isCompleted');
+    },
+    set(key, value) {
+      this.set('todo.isCompleted', value);
+
+      this.send('save', this.get('todo'));
+      return value;
+    }
+  }),
+
   actions: {
     editTodo() {
       this.set('isEditing', true);
diff --git a/app/components/todo-item/template.hbs b/app/components/todo-item/template.hbs
index 8c2c8fe..a195f9b 100644
--- a/app/components/todo-item/template.hbs
+++ b/app/components/todo-item/template.hbs
@@ -3,7 +3,7 @@
                            focus-out='save'
                            insert-newline='save'}}
 {{else}}
-  {{input type='checkbox' checked=todo.isCompleted class='toggle'}}
+  {{input type='checkbox' checked=completeTodo class='toggle'}}
   <label {{action 'editTodo' on='doubleClick'}}>{{todo.title}}</label>
   <button {{action 'removeTodo'}} class='destroy'></button>
 {{/if}}

Do you plan to merge #6 soon? If that happens, this issue will be over. Otherwise, let me know if you want me to create a different PR with the specific fix for this problem.

Cheers!

[mhaylock]

@jmbejar I just came across this same problem while also attempting to run this app against a server API. The solution you share here looks nice and tidy.

Given that #6 is very out of date now, I'd recommend creating your own Pull Request with this fix as I'd imagine it would have a greater chance of being merged.

[mhaylock]

Actually @jmbejar I ended up finding a much simpler solution to this - see my PR #23.

[jmbejar]

@mhaylock I see. Great job 👍