Ember : 一个模板两条路线

Question

我是 Ember 的新手，我尝试制作一个简单的 CRUD。我想要一个用于添加和编辑对象的模板。

这是我的代码：

this.route('foos', {path: '/foos_path'}, function() {
            this.route('edit',{path: '/edit/:foo_id'});
            this.route('add',{path: '/add'});
            this.route('index');
        });

添加功能很好用，但我无法使用编辑功能。这是我的编辑路线。

import Ember from 'ember';

export default Ember.Route.extend({
    title : '',
    model: function(params) {
        this.store.find('foo', params.foo_id).then(function(foo) {
            console.log(this, this.get('title'));
            this.set('title', foo.title);
        });
    },


    renderTemplate: function() {
        this.render('foos.add', {
           into: 'foos',
           controller: 'foos.add'
        });
        this.render('foos/add');
    }
});

任何帮助都会很棒 :)

Answer 1

你需要的是像这样扩展你的添加控制器，而不是使用相同的路由。

import Ember from 'ember';
import Controller from 'dir/controllers/projects/editController';
// Add controller
export default Controller.extend({

});

编辑和添加模板都可以像这样

{{!-- your add controller can overwrite your editController objects --}}
{{view 'navbar' navbarParams=controllerRelatedObject}}

{{partial "someform"}} 

<button {{action 'makeEdit' object1 object2}}  class="btn btn-default"> Save </button>

编辑控制器将处理 makeEdit

// Edit controller
actions: {
   makeEdit : function(givenObject, wantedObject){
      Ember.RSVP.all(givenObject.invoke('save)).then(...)
   },
}

希望对您有所帮助。

Answer 2

抱歉耽误了时间，感谢您的回答。这就是我实现目标的方式：

添加路由：

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return this.store.createRecord('foo');// This line is need to load a clean model into the template
    },
});

编辑路线：

import Ember from 'ember';

export default Ember.Route.extend({
    controllerName : 'foos.add', // Defines addController for edit route
    templateName : 'foos.add', // Defines AddTemplete for edit route
    model: function(params) {
        return this.store.find('foo', params.foo_id); // Loads the foo object inside the template
    }
});

我的 addTemplate 如下所示：

<div class="row">
    <form class="col s12">
        <div class="row">
            <div class="input-field col s12">
                {{input placeholder="Foo name" id="foo_name" type="text" class="validate" value=model.title}}
                <label for="foo_name"></label>
            </div>
            <div class="row">
                <button class="btn waves-effect waves-light col s12" type="submit" name="save" {{action 'add'}}>Submit
                    <i class="mdi-content-send right"></i>
                </button>
            </div>
          </div>
    </form>
</div>

在我的控制器中，我定义了保存操作（可以在路由中定义）：

import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {
        save: function() {
            // The following is not needed now because we load a record on add and edit route.
            /*var foo = this.store.createRecord('foo', {
                title : this.get('title')
            });*/
            // We can instead save the record directly
            this.get('model').save().then(function() {
                console.log('Foo save.');
            }).catch(function(error) {
                console.log('Error : ' + error);
            });
        },
    }
});

我希望这会对某人有所帮助。

Ember : 一个模板两条路线

Ember : Two route for one template

ember.js

ember-router

ember-cli