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

add函数的工作很好，但我不能让工作的编辑功能。 这是我的编辑路线。

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

对不起，谢谢你的回答。这就是我已经实现了我的目标：

AddRoute：

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

EditRoute：

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

我希望这会帮助别人。

Answer 2

你需要的是扩大你的加入控制器这样的，而是采用了相同的路线。

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(...) 
    }, 
} 

希望这有助于。