1

Ember-CLI を使用して todo タイプのプロジェクトに取り組んでいます。私は気の利いた todoMVC プロジェクトを出発点として使用しましたが、このガイドを使用して Ember-CLI で構築しました。

http://blaketv.com/2014/10/03/ember-cli-todo-mvc-tutorial-0-0-47//

私の質問は、親レベルでプロジェクトを追加するにはどうすればよいかということです。そのため、マスター/詳細タイプのインターフェイスを用意し、サイドバーにプロジェクトを配置して、プロジェクト名を CRUD にできます。プロジェクト名をクリックすると、詳細ペインに Todo が表示されます。

モデルへの hasMany 関係を十分に定義できましたが、複数の {{outlets}} が必要かどうかわかりません。すべてを同じページにまとめて機能させるのは非常に困難です。

プロジェクトの私のモデルは次のとおりです。

export default DS.Model.extend({
  title: DS.attr('string'),
  isCompleted: DS.attr('boolean'),
  description: DS.attr('string'),
  todos: DS.hasMany('todo', {async: true})
});

todos のモデル:

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),
  isCompleted: DS.attr('boolean')
});

およびメインのルーター:

Router.map(function() {
  this.resource('projects', function () {
    this.route('new'); 
    this.resource('project', { path: ':id' }, function () {
      this.route('todos');
    });
  });
});

プロジェクトのルート:

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('project', params.id);
  }
});

インデックス ルート:

export default Ember.Route.extend({
  model: function() {
    return this.store.find('project');
  }
});

Todos ルート:

export default Ember.Route.extend({
  model: function() {
    return this.modelFor('todos');
  }
});

したがって、project.hbs の場合、ここが難しいところです。ブートストラップでサイドバーを作成すると、このアウトレットに todo が表示されます....

<div class="projects-column col-md-3">
  <div id="inbox-header"><span class="glyphicon glyphicon-inbox"></span> Inbox <span class="badge">42</span></div>
  <div id="projects-header"><span class="glyphicon glyphicon-list-alt"></span> Projects</div>
  <div id="forecast-header"><span class="glyphicon glyphicon-calendar"></span> Forecast</div>
  <div id="log-header"><span class="glyphicon glyphicon-book"></span> Sessions Log</div>
</div>
  <div>{{outlet}}</div>

Index.hbs:

<ul>
  {{#each model}}
  <li>{{link-to title "project.todos" this}}</li>
 {{/each}}

上記のプロジェクト タイトル リンクをクリックすると、関連付けられた todo が表示されます....しかし、左側のペインにレンダリングされます...おそらく CSS レイアウトに関するものです...しかし、何かが非常にあることを教えてくれます私が行方不明になっているこれを行うためのエンバーっぽい方法。

次に/project/todo.hbs、反復があります

{{#each model.todos}}
    <li>{{title}}</li>
{{/each}}

コントローラーなどの CRUD を作成することについては、まだ触れていません。ほとんどの場合、これはばかげており、これにアプローチするはるかにエレガントな方法があります...

基本的に、CRUD を行うプロジェクトの親ルートが必要です。次に、サイドバーでプロジェクト リンクのリストをレンダリングして 1 つをクリックすると、レンダリングされた ToDoMVC 作業アプリが右側のペインに表示されます。

もちろん、これは私のアプリケーションの出発点にすぎません。誰かがこれを行うエレガントな方法を思いついた場合、他の人が学べるように、それを github のオープン ソース プロジェクトに変えることができます。

複数の方法 (アウトレット、パーシャル、レンダリング、他のテンプレート、ビュー、コンポーネントなどへのレンダリング) があるため、急成長中の ember 開発者の多くは、この種のことで苦労していると思います。

これ以上先に進む方法が本当にわかりません。

4

1 に答える 1

0

まだ立ち往生しているかどうかはわかりませんが、サイドバーとしてブートストラップなしで試してみて、{{#each}} [完全なコードはこちら] を配置するだけです

App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  LOG_BINDINGS: true,
  LOG_VIEW_LOOKUPS: true,
  LOG_ACTIVE_GENERATION: true,
  debugMode: true
});

App.Router.map(function() {
  this.resource('projects', {
    path: '/'
  });
  this.resource('project', {
    path: '/projects/:project_id'
  }, function() {
    // URL = '/projects/:id/todos'
    this.resource('project.todos', {
      path: '/todos'
    }, function() {
      // URL = '/project/:id/todos/new'
      this.route("new");
    });

  });
});
App.ApplicationAdapter = DS.FixtureAdapter.extend();
//App.Store = DS.Store.extend({adapter : DS.FixtureAdapter});

App.ProjectsRoute = Ember.Route.extend({
  model: function() {
    return this.store.findAll('project');
  },
  actions: {
    addproject: function() {
      var newproject = this.store.createRecord('project', {
        name: "My New project"
      });
    },
    removeproject: function(project) {
      console.log(project);
      console.log(this.controller.get("model"));
      this.controller.get("model").removeObject(project);
    }
  }
});

App.ProjectRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('project', params.project_id).then(function(project) {
      return project;
    });
  }

});
App.ProjectsIndexRoute = Ember.Route.extend({
  model: function(params) {
    return this.modelFor('project');
  }
});

App.ProjectTodosRoute = Em.Route.extend({

  model: function(params) {
    return this.modelFor('project');

  },
  actions: {
    addtodo: function() {
      this.transitionTo("project.todos.new");
    }
  }

});
App.projecttodosNewRoute = Em.Route.extend({
  model: function(params) {
    parentprojectId = this.modelFor('project').get("id");

    newtodo = this.store.createRecord('todo', {
      id: "5",
      name: "John Doe",
      //project : parentprojectId
      project: this.store.getById('project', parentprojectId)


    });
    console.log("new todo = " + newtodo);
    return newtodo;

  },
  actions: {
    save: function() {
      //console.log(this.controllerFor('projecttodosNew').content);
      //console.log('save of newtodo = '+this.controllerFor('projecttodosNew').get('newtodo'));
      console.log('newtodo~ ' + newtodo.get('name') + ', ' +
        newtodo.id + ', ' + newtodo);
      newtodo.save()
        //this.controllerFor('projecttodosNew').content.save()
        .then(function() {
          this.transitionTo("project.todos");
        });

    },
    cancel: function() {
      console.log("rollback for " + this.get("controller.model"));
      this.get("controller.model").rollback();
      this.set("controller.model", null);
      this.transitionTo("project.todos");
    }
  }
});

//App.projecttodosNewController = Ember.ObjectController
//			.extend({
//				needs : [ 'application', 'project'],
//				newtodo : null
//    });
App.Project = DS.Model.extend({
  name: DS.attr(),
  todos: DS.hasMany('todo', {
    async: true
  })
});

App.Project.FIXTURES = Em.A([{
  id: 1,
  name: 'Monday',
  todos: ['2']
}, {
  id: 2,
  name: 'Tuesday',
  todos: ['1', '2']
}, {
  id: 3,
  name: 'Wednesday',
  todos: ['4']
}]);

App.Todo = DS.Model.extend({
  name: DS.attr('string'),
  //project : DS.belongsTo('project')
});
App.Todo.FIXTURES = [{
  id: 1,
  name: 'shop',
  project: 1
}, {
  id: 2,
  name: 'sell things',
  project: 2
}, {
  id: 4,
  name: 'dance',
  project: 3
}];
/* Put your CSS here */

html,
body {
  margin: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.6.1/ember.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.0.0-beta.10/ember-data.prod.js"></script>

</head>

<body>
  <script type="text/x-handlebars">
    <h2>Welcome to "The Project/TODO Demo"</h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="projects">
    <ul>
      {{#each item in model}}
      <li>{{#link-to 'project.todos' item }}{{item.name}}, List of todos{{/link-to}} ,
        <button {{action "removeproject" item}}>X</button>
      </li>
      {{/each}}

    </ul>
    <button type="button" {{action "addproject" this.id}}>Add a project</button>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="project/index">
    <br><b>Name of project:</b> {{name}}

  </script>
  <script type="text/x-handlebars" data-template-name="project">
    {{#link-to "projects"}}Home{{/link-to}} {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="project/todos/index">
    <h1></h1>
    <b>todos</b> 
    <br>
    <ul>
      {{#each todo in todos}}
      <li>{{todo.name}}</li>
      {{/each}}
    </ul>
    <button type="button" {{action "addtodo"}}>Add a todo</button>
    <br>{{#link-to 'project' this}}project details page{{/link-to}} {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="project/todos/new">
    <h1></h1>
    <b>New todos</b> 
    <br>
    <ul>
      <li>Name: {{input type='text' value=model.name}}</li>
      <li>todo Id: {{input type='text' value=id}}</li>
      <li>Parent project Id: {{project}}</li>
    </ul>
    <button type="button" {{action "save"}}>Save todo</button>
    <button type="button" {{action "cancel"}}>cancel</button>
    <br>{{outlet}}
  </script>
</body>

</html>

あなたのホームページ/インデックスの上に。それが機能するようになったら、ブートストラップでレイアウトをいじって、見栄えを良くすることができます。

リンク docに似ています。それがあなたのハードルを超えてくれることを願っています.

于 2015-02-16T15:04:04.023 に答える