使用 Iron-router 从超级控制器继承收益模板答案

【问题标题】：Inheriting yield templates from super controller with iron-router使用 Iron-router 从超级控制器继承收益模板
【发布时间】：2015-05-07 06:56:33
【问题描述】：

我有一个超级控制器：ApplicationController，它产生于我的区域：页眉/页脚。当我配置的一个路由尝试让步到另一个模板上的另一个区域时，父控制器的 yieldTemplates 将被覆盖。

例子：

   ApplicationController = RouteController.extend({
    yieldTemplates: {
        'footer': { to: 'footer' },
        'header': {to: 'header'}
    }
});

var SignUpController = ApplicationController.extend({
    template: 'signUp'

});

Router.map(function () {


    this.route('signup', {
        path: '/sign-up',
        controller: SignUpController,
        template: 'signUp-form',
        disableProgress: true,
        yieldTemplates: {
            'personal-signup': {to: 'signup-detail'}
        }
    });
});

知道为什么继承在这种情况下不起作用吗？

【问题讨论】：

标签： javascript meteor iron-router

【解决方案1】：

我遇到了类似的问题，请在此处阅读答案：https://github.com/EventedMind/iron-router/issues/249#issuecomment-27177558

发生的事情是您的路由器级别配置覆盖了 RouteController 原型。通常，选项会覆盖 Iron-router 中的原型属性。

一个简单的解决方案是创建一个具有主要收益的全局对象，然后在需要新收益时在每个控制器上扩展该对象：

var mainYieldTemplates = {
    'footer': { to: 'footer' },
    'header': {to: 'header'}
};

ApplicationController = RouteController.extend({
    yieldTemplates: mainYieldTemplates
});

var SignUpController = ApplicationController.extend({
    template: 'signUp',
    yieldTemplates: _.extend({}, mainYieldTemplates, {
            'personal-signup': {to: 'signup-detail'}
        }
    )
});

Router.map(function () {
    this.route('signup', {
        path: '/sign-up',
        controller: SignUpController,
        template: 'signUp-form',
        disableProgress: true,
    });
});

您的代码中还有一个小不一致，您在控制器中将“模板”属性声明为“signUp”，但随后在路由本身中将其设置为“signUp-form”。这将覆盖控制器上的“模板”属性。您可以改为使用所有路由的属性为每个路由创建一个新控制器，而不是覆盖它们。

【讨论】：

我喜欢这种方法，有一个变化和一个警告：我没有定义一个 mainYieldTemplates 全局对象（这并没有错），而是考虑参考 SignUpController 的__super__ _.extend 中的原型，但这不起作用。我可以用ApplicationController.yieldTemplates 代替mainYieldTemplates，但不能用SignUpController.__super__.yieldTemplates。知道为什么吗？请注意SignUpController.__super__.data.call(this) 在data 方法中工作正常，所以我不知道为什么它在yieldTemplates 属性中不起作用。

【解决方案2】：

我厌倦了在另一个答案中使用该解决方案，最后只是猴子补丁RouteController 在这种情况下表现得像我期望的那样。到目前为止效果很好。

(function(){
  var orig = RouteController.extend;
  RouteController.extend = function(newChild) {
    var extendedTemplates = {};
    if (!newChild.yieldTemplates) {
      newChild.yieldTemplates = {};
    }
    _.extend(extendedTemplates, this.prototype.yieldTemplates);
    _.extend(extendedTemplates, newChild.yieldTemplates);
    newChild.yieldTemplates = extendedTemplates;
    return orig.apply(this, arguments);
  }
})();

在您创建自己的任何 RouteController 之前，将该代码放在某处。从那里扩展的任何其他控制器都将扩展到父级的 yieldTemplates 字段。

【讨论】：