Ember 将模型传递给 transitionToRoute答案

【问题标题】：Ember passing a model to transitionToRouteEmber 将模型传递给 transitionToRoute
【发布时间】：2015-06-15 19:05:03
【问题描述】：

我在 ember 1.11 中使用 Ember-cli

我正在尝试使用控制器中的 transitionToRoute 方法来转换到路由并将动态生成的对象作为模型提供给它。

这是我的控制器：

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {      
      launch_scanner: function(){
        console.log('launch_scanner');
        var model = {name: "Edward", phone: "123", email: "email@test.com"};
        //the final app will pull the model variable from a QR scanner

        this.transitionToRoute('addcontact', model);
     }
  }      
});

当我触发这个动作时，transitionToRoute 方法会导致这个错误：

未捕获的错误：传递的上下文对象多于传递的对象路线的动态段：addcontact

如果我省略了模型参数，它会很好地转换到 addcontact 路由。我做错了什么？

这是我的路由器文件：

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('home', {path: '/'});
  this.resource('addcontact', {path: '/addcontact'});
});

export default Router;

【问题讨论】：

请显示您的路由器文件，看看您需要传递哪些参数
我已更新以显示路由器文件。

标签： ember.js ember-cli ember-router ember-controllers

【解决方案1】：

您正在处理许多 Ember 应用程序中出现的一个经典问题，即如何处理“新”/“创建”情况。

你不能定义这样的路由

this.route('addcontact', { path: /addcontact/:thing_id }

因为新的联系人没有id，直到它被持久化到服务器时才会没有id，此时它就不再是新的了。

然而，在您的应用程序中有一些要点，在您的情况下，我想在“主页”页面上，用户按下了“新联系人”按钮，它可能包含有关创建什么或如何创建它的有用信息，甚至可能想使用this.store.createRecord 在此处创建对象--但是如何将该信息或新记录传递给addcontacdt 路由，它不能有动态段？

一些想法包括：

在home 路由或其他任何地方创建新联系人，并将其存储在控制器中。然后，在新路由的model钩子中，使用this.controllerFor('home').get('newContact')检索它。
使用transitionTo('newcontact', queryParameters) 将创建新对象所需的参数（如果有）作为查询参数传递给addcontact 路由。然后，在 model 挂钩中，使用 this.store.createRecord('contact', transition.queryParameters) 或等效的东西创建新对象。

【讨论】：

我发现我可以将我的路线定义为：this.resource('addcontact', {path: '/addcontact/:info'});这允许我通过 transitionToRoute 方法将新对象作为模型传递。我不知道这是否正确，因为我在文档中找不到任何关于它的内容，但它确实有效。
是否可以不带查询参数传递？

【解决方案2】：

这很正常，因为您的 addContact 路由中没有任何动态段。你应该把你的路由器改成

Router.map(function() {
  this.route('home', {path: '/'});
  this.resource('addcontact', {path: '/addcontact/:id'});
});

现在您可以传递模型 ID 而不是整个模型来触发 model 挂钩。或者，您可以传递整个模型，但它不会触发 model 钩子。虽然你仍然可以在 afterModel 钩子中修改你的模型。

【讨论】：

好吧，既然数据是动态生成的，它还没有id，那我怎么把整个模型都传过去呢？
您无需更改控制器代码，只需更改路由器即可。它应该工作。如果您不确定，请查看 ember 文档：emberjs.com/api/classes/…
@EdwardEllsworth 请不要忘记接受一个解决方案，以便未来的用户知道什么是有效的:)

【解决方案3】：

如果您想导航到未保存记录的子路径，您有 2 个选项

在过渡到路线之前保存您的模型

model.save().then(function(result){
   self.transitionToRoute('route',result.id)
});

如果您不想保存模型，或者在 createRecord 中为模型生成一个 id（也许用户可以取消并且您不想处理删除）

创建具有低潜力相同 id 的 id 的基本功能是：

generateIdForRecord: function() {
    var d = new Date().getTime();
    var uuid = 'xxxxyyyxxxxxxxxyyxyxxxyyy'.replace(/[xy]/g, function(c){
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c === 'x' ? r : (r & 0x7 | 0x8)).toString(16);
    });
    return uuid;
}

使用这种方法，尚未保存的模型有一个要转换到的 id，只需考虑处理来自该路由的转换，因为当前 id 在保存模型后不再有效（模型从服务器获取真实 id 作为响应）。

【讨论】：