ember-cli のサンプルを探す

イシュー

  • とりあえず、ember-cli のお作法を学ぶ

参考

ember-cli todo tutorial

$ sane generate resource todo title:string isCompleted:boolean 
info: Created a new model ("Todo") at api/models/Todo.js!
info: Created a new controller ("todo") at api/controllers/TodoController.js!
version: 0.1.12
Could not find watchman, falling back to NodeWatcher for file system events
installing
  create app/models/todo.js
installing
  create tests/unit/models/todo-test.js
installing
  create app/routes/todo.js
  create app/templates/todo.hbs
installing
  create tests/unit/routes/todo-test.js
$

watchman

1.x 系のインストール

ember-cli の heroku deploy

参考

buildpack 追加

heroku config:set BUILDPACK_URL=https://github.com/tonycoco/heroku-buildpack-ember-cli.git

他のリソースサーバに接続

Refused to connect to 'http://localhost:1337/api/v1/todos' because it violates the following Content Security Policy directive: "connect-src 'self' ws://localhost:35729 ws://0.0.0.0:35729".

  • hoge/app/adapters/application.js に host を追加するとJSエラー
import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  coalesceFindRequests: true,
  namespace: 'api/v1',
  host: 'http://localhost:1337'
});

access control allow origin

すばらしきTodoアプリ

emberJs と ember-cliとの違い

  • ember-cli の方が、set , get 系を簡単に使用できる？
  • ember-cli (get setをテンプレート（app/templates/todos.hbs）で実装）
<ul id="todo-list">
    {{#each}}
        <li {{bind-attr class="isCompleted:completed"}}>
            {{input type="checkbox" checked=isCompleted class="toggle"}}
            <label>{{title}}</label><button class="destroy"></button>
        </li>
    {{/each}}
</ul>
  • emberJs（js/controllers/todo_controller.js）
{{#each itemController="todo"}}
  <li {{bind-attr class="isCompleted:completed"}}>
    {{input type="checkbox" checked=isCompleted class="toggle"}}
    <label>{{title}}</label><button class="destroy"></button>
  </li>
{{/each}}

Todos.TodoController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      return model.get('isCompleted');
    } else {
      // property being used as a setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

参考