ember-cli/ember-cli-todos

Todos

This is an example of the todo-mvc app, it aims to trail ember-cli and ember.js's latest stable conventions. To view a project more on the bleeding edge, feel to pop over and check out ember-jobs

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with NPM)
• Bower
• Ember CLI
• PhantomJS

Installation

• git clone <repository-url> this repository
• change into the new directory
• npm install
• bower install

Running / Development

• ember server
• Visit your app at http://localhost:4200.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Building

• ember build (development)
• ember build --environment production (production)

Deploying

Specify what it takes to deploy your app.

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox

ember-cli-todos's Issues

Any diff between return {} and return RSVP.hash in this example?

I noticed this block in the application model hook and was curious if this was the same/or different than returning "Ember.RSVP.hash"

https://github.com/ember-cli/ember-cli-todos/blob/master/app/application/route.js#L11-L14

Thanks for the input!

more tests

checkbox should abide by actions up / bindings down

How does changes to a model encapsulated ripple?

I was looking at the todo list component and noticed the injected service /store is used to do a simple create. One challenge I have learning ember 2.x idioms is the parent/child route scenario when data is shared between the two.

for example: in my list (parent component) when I change something inside an action (like this)

https://github.com/ember-cli/ember-cli-todos/blob/master/app/components/todos-route/component.js#L54-L56

How will the child component get these new models/changes "automagically" like it did in the controller approach? My understanding was that you would need to "bubble" the action up at some point and make the "store" model changes inside the top level "Ember.Controller" for that view - then when changes are made here (in the controller scope) they would be pushed down to the components via 2WDB as per usual.

That said - it doesn't feel like this example is doing that so what should we prepare for as we migrate our apps to 2.x ?

Missing dependency on bower.js

I've downloaded the project, but when I ran it, I got an error related to a missing moment.js dependency.

Please add to the bower depency this repo.
bower install moment --save

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

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!

The 'Clear completed' button doesn't works in FF

The 'Clear completed' button doesn't works in FF(my version is 40.0.3). To works I need to remove visibility hidden and remove pseudo element

diff --git i/app/styles/app.css w/app/styles/app.css
index e2549a6..23906fe 100644
--- i/app/styles/app.css
+++ w/app/styles/app.css
@@ -316,17 +316,17 @@ html .clear-completed:active {
        line-height: 20px;
        text-decoration: none;
        cursor: pointer;
-       visibility: hidden;
        position: relative;
 }

 .clear-completed::after {
-       visibility: visible;
+       /*visibility: visible;
        content: 'Clear completed';
        position: absolute;
        top: 0;
        right: 0;
-       white-space: nowrap;
+       white-space: nowrap;*/
 }

I don't know why is better or necessary a pseudo element, the .clear-completed element has a number of completed task but I cant see it because the element is hidden

Update to latest ember and ember-cli

Low hanging fruit it someone wants to tackle this. Looks good on us if we have an up to date ember to-do app out there