如何將項目父項添加到Ember-CLI TodoMVC？

Question

我正在使用Ember-CLI進行待辦事項類型項目。我作爲一個起點漂亮todoMVC項目，但使用灰燼-CLI本指南內置：

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

我的問題是，我將如何去在父級別添加項目。所以我們將有一個主 - 細節類型的接口，並且在邊欄中我們會有項目，並且您可以添加CRUD項目名稱，然後當您單擊項目名稱時，將在詳細信息窗格中看到待辦事項。

我已經得到足夠的定義與模型具有許多關係，但我無法弄清楚是否需要多個{{outlets}}將所有內容都放在同一頁面上並工作是非常困難的。

這裏是我的項目模型：

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

和模型待辦事項：

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'); 
    } 
}); 

託多斯路線：

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

所以對於project.hbs這是它得到棘手。我創建bootsrap側邊欄，然後該出口顯示待辦事項....

<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}} 

所以這上面，當你點擊項目名稱鏈接，它顯示了相關的todos ....但它在左窗格中呈現......它可能只是關於CSS佈局的一些東西......但有些東西告訴我有一個非常Ember-ish的方式來做到這一點，我失蹤了。

然後在/project/todo.hbs我們迭代

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

我甚至沒有真正解決使CRUD的控制器或任何東西。最有可能這上面是可笑的，有一個更加優雅的方式來處理這...

基本上我想要一個項目的父路由，我做CRUD ...然後當你呈現項目鏈接列表在sidebard中單擊一個，你會在右窗格中看到渲染的ToDoMVC工作應用程序。

當然，這只是我申請的起點。最有可能的是，如果有人想出一個優雅的方式來做到這一點，我們可以把它變成github上的開源項目，供其他人學習。

我想到有一堆新興燼開發商正與因多種方式去做這類事情很難（網點，諧音，渲染，渲染到其他模板，視圖，元器件等）

真的不知道如何得到更多。

Answer 1

不知道如果你還在堅持，但我會嘗試沒有引導的側欄，只要把{{#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 
 
// \t \t \t .extend({ 
 
// \t \t \t \t needs : [ 'application', 'project'], 
 
// \t \t \t \t 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>

在您的主頁/索引的頂部。在你開始工作之後，你可以開始使用bootstrap來玩佈局，並且讓它看起來很酷。

類似於links doc。希望你能通過你的障礙。