2015-02-10 3 views
1

Я работаю над проектом типа todo с использованием Ember-CLI. Я использовал в качестве отправной точки изящной проекта todoMVC, но построенный с Эмбер-CLI с помощью этого руководства:Как добавить родительский проект к Ember-CLI TodoMVC?

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

Моего вопроса, как бы я идти о добавлении проектов на родительском уровне. Таким образом, у нас был бы интерфейс типа master-detail, а на боковой панели у нас были бы проекты, и вы могли бы проектировать имена проектов CRUD, а затем, когда вы нажимаете на название проекта, вы видите todos в панели подробностей.

Я достаточно далеко определил отношения hasMany с моделями, но не могу понять, нужно ли мне несколько {{выходов}}. Очень сложно получить все на одной странице и работать.

Вот моя модель для проекта:

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

Index Маршрут:

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 это, где это становится сложнее. Я создаю боковую панель с bootsrap, а затем этот выход показывает ToDos ....

<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 ... но что-то говорит мне, что есть очень простой способ сделать это, что мне не хватает ,

Тогда в /project/todo.hbs мы имеем итерация

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

Я даже не очень адресованный делает CRUD для контроллеров или что-нибудь. Скорее всего, это выше смешно, и есть намного более элегантный способ приблизиться к этому ...

В принципе, я хочу родительский маршрут проектов, который я делаю CRUD с ..., а затем, когда вы просматриваете список ссылок на проект в sidebard и нажмите на один, вы попадете в правую панель обработанного рабочего приложения ToDoMVC.

Конечно, это только отправная точка для моего приложения. Скорее всего, если кто-то придумает элегантный способ сделать это, мы сможем превратить его в проект с открытым исходным кодом на github, чтобы другие могли учиться.

Я думаю, что куча расцветающих разработчиков Ember с трудом время с такого рода вещи, из-за многочисленных способов сделать это (отводы, обертоны, визуализации, визуализации в другие шаблоны, представления, компонентов и т.д.)

Не знаю, как это сделать дальше.

ответ

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 
 
// \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>

в верхней части вашей домашней страницы/указателя. После того, как вы получите эту работу, вы можете начать играть с макетом с помощью бутстрапа и получить его, выглядя круто.

похоже на links doc. Надеюсь, что ты преодолешь свой барьер.

+0

Обратите внимание, что демонстрационное приложение не отполировано или использует полный CRUD, только части, но я хотел просто получить маршруты и имена шаблонов там, чтобы вы могли посмотреть. –

Смежные вопросы