Ember js pre 4 - 路由器未在链接点击时解析 id

Question

我有一个帐户列表，然后我有一个查看链接来详细查看帐户，这是帐户路径。当我单击视图链接时，（guid）在通过路由器时不会更新，它只会在 URL 中更新，但似乎并没有传递到代码中。

当我刷新浏览器时，（guid）会被传送到路由器......由于某种原因它无法解决。

我没有使用 ember-data，但将来会使用它。

这是我的“帐户”模板代码，带有“查看”链接：

{{#each accountdata in controller}}
<tr>
<td>{{accountdata.accountnumber}}</td>
<td>{{accountdata.accountname}}</td>
<td>{{accountdata.accounttypestatus}}</td>
<td>{{accountdata.accountuser}}</td>
<td>{{#linkTo account accountdata}}View{{/linkTo}}</td>
</tr>
{{/each}}

accountdata 是带有“accountguid”的上下文，它是我的 id。

这是我的路由器：

App.Router.map(function() {
    this.resource("accounts", { path: '/accounts' });
    this.resource("account",  { path: "/accounts/:accountguid" });
});

App.AccountsRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        controller.set('searchfilter','ALL');
        controller.search();
    }
});

App.AccountRoute = Ember.Route.extend({
    setupController: function(controller, model) {        
        controller.show(controller);
    },
    model: function(params) {
        this.controllerFor('account').set('accountguid',params.accountguid);        
    },
    serialize: function(model) {
        return {accountguid: Em.get(model, 'accountguid')}
    }
});

我的 controller.show 是我发送上下文以调用脚本以显示帐户详细信息的位置。

所以我只需要 view 每次执行正确的 accountguid ，然后调用 show(context) 方法。

谢谢

这是我的旧路由器代码，它可以 100% 工作。当我点击一个链接时，它解决了：accountguid，当我刷新浏览器时，它做了同样的事情。我没有问题，一切正常。

//         //Accounts
//         accounts: Ember.Route.extend({
//             route: '/accounts',
//             index: Ember.Route.extend({
//                 route: '/',
//                 connectOutlets: function (router) {
//                     router.get('applicationController').connectOutlet('accounts');
//                     router.get('accountsController').set('searchfilter','ALL');
//                     router.get('accountsController').search();
//                 }
//             }),
//             view: Ember.Route.extend({
//                 route: '/:accountguid',

//                 connectOutlets: function (router, account) {
//                     router.get('applicationController').connectOutlet('account', account);
//                     router.get('accountController').show(account);                    

//                     //router.get('accountController').connectOutlet('eventloghistory','eventloghistory');                    
//                 }
//             })
//         }),

Answer 1

我设法用以下代码解决了我的问题。我现在可以刷新浏览器，并且可以单击链接，它会将当前使用的 :accountguid 传递给 show() 方法。

App.AccountRoute = Ember.Route.extend({
    model: function(params) {
        return {accountguid: params.accountguid};
    },
    setupController: function(controller, model) {        
        controller.show(model);
    },
    serialize: function(model) {
        return {accountguid: Em.get(model, 'accountguid')}
    }
});

Answer 2

将您的路由器映射更改为以下内容，它应该可以工作

App.Router.map(function() {
  this.resource("accounts", function(){
    this.resource('account',{path:':account_id'});
  }); 
});

Answer 3

请向我们展示您的 AccountsController 和 AccountController 背后的代码。如果您提供一个包含整个构造的 jsfiddle，那将是最有用的。

一般来说，您可能不知道新事物的流向。以下是两种情况下发生的情况： 1. 通过设置 URL（例如 /account/5）导航到 AccountRoute。 1.1。 AccountRoute 的“模型”钩子被调用

model: function(params) {
    return your model here...
}

使用参数 = { accountguid: 5 }。因为你没有使用 ember-data，你应该实现这个钩子并在那里初始化并返回模型。 1.2. setupController 钩子通过 AccountController 和模型钩子返回的模型调用。没有后面的代码

controller.show(controller);

不太清楚它的目的是什么，但你可能应该做类似的事情

setupController: function(controller, model) {
  this._super(controller, model);
  controller.set('content', model);
  controller.show(model);
}

如您所见，通过不实现模型挂钩，您的 URL 保持正确，但路由不知道如何构建所需的模型资源。

1. 你通过链接转换到路由来调用

   {{#linkTo account accountdata}}查看{{/linkTo}}

在这里，linkTo 期望 accountdata 是路由的完整帐户模型。这意味着它可能不只携带像 id 这样的部分数据（阅读此内容以获得许可：In latest Ember, how do you link to a route with just the id/name of a model, rather than providing all of its attributes in the linking page?）。 2.1。 AccountRoute 的模型钩子被 NO 调用。 AccountRoute 模型属性设置为传递给 linkTo 的对象（在我们的例子中为“accountdata”）。 2.2.使用 AccountController 和 accountdata 对象调用 setupController。 如果您的 accountdata 对象不完整，最好在此处创建一个完整的实例并将其设置为控制器。

你可以想象，如果你的 accountdata 像 { id: 5, accountname: "John", accounttypestatus: "A", ...}，那么点击linkTo后，URL会正确更新为/account /5，但帐户模板将接收帐户数据，而不是实际帐户。

P.P.如果以上都没有任何帮助，这可能是您的问题：https://github.com/emberjs/ember.js/issues/1709