routes - 嵌套路由从链接触发，而不是从 URL 更改触发

Question

我正在开发一个基本的 ember.js 应用程序，对某些行为有点困惑。我有一些如下所示的路线:

this.resource('campaigns', { path: '/campaigns'}, function() {

    this.route('new', { path: '/new' });
    this.route('campaign', { path: '/:campaign_id' });

});

App.CampaignsIndexRoute = Ember.Route.extend({

model: function() {

    App.Keyword.find();
    return App.Campaign.find();

},

renderTemplate: function(controller, model) {

    this.render({outlet: 'page'});

}

});

App.CampaignsCampaignRoute = Ember.Route.extend({

model: function(params) {
    alert("Model Firing");
    console.log(params.campaign_id);
    return App.Campaign.find(params.campaign_id);
},
renderTemplate: function(controller, model) {
    this.render({outlet: 'page'});
    alert("Template Firing");
}

});

...以及如下所示的 View :

App.CampaignsCampaignView = Em.View.extend({

templateName: 'templates/campaigns/campaign',

});

...主模板如下所示:

<!-- ================================================== -->
<!-- =================== APP HEADER =================== -->
<!-- ================================================== -->

{{ view App.HeaderView }}

<!-- ================================================== -->
<!-- ======================= APP ====================== -->
<!-- ================================================== -->

<div id="app" class="">

<!-- ================================================== -->
<!-- ==================== SIDEBAR ===================== -->
<!-- ================================================== -->

<div id="sidebar">

    {{ view App.NavigationView }}

    {{ view App.StarredCampaignsView }}

</div>

<!-- ================================================== -->
<!-- ====================== STAGE ===================== -->
<!-- ================================================== -->

<div id="stage" class="">

    <!-- ================================================== -->
    <!-- ================= STAGE SIDEBAR ================== -->
    <!-- ================================================== -->

        <div id="stage-sidebar" class="">

        {{ view App.StageSidebarView }}

    </div>

    <!-- ================================================== -->
    <!-- ====================== PAGE ====================== -->
    <!-- ================================================== -->

    <div id="page" class="">

        {{ outlet page }}

    </div>

</div>

</div>

正如您所看到的，CampaignsCampaign route 有 2 个非常简单的警报，只是为了让我知道正在激活什么。

因此，/#/campaigns 返回营销事件列表，/#/campaigns/new 返回创建页面，而/#/campaigns/:campaign_id 应显示单个营销事件及其详细信息。

这一切在系统内部都能完美运行。当您从/#/campaigns View 中单击广告事件时，它会直接链接到详细 View ，并加载所有正确的信息。

问题

如果您只是输入类似“http://mysite.com/#/campaigns/ANY_ID”的内容，并且不要单击 ListView 中的链接，就会出现问题。页面只会加载空白，并且不会调用 renderTemplate(不警报)。模型正在加载(收到警报)并且 params.campaign_id 已成功传递(可以成功登录控制台)。

我认为这是路由器问题，但不知道从哪里开始。任何帮助将不胜感激。

感谢您的浏览!我可以发布更多信息，只需在评论中告诉我您需要什么。

Answer 1

直接进入页面时所遵循的过程与点击链接时所遵循的过程略有不同。我没有在您的模板中看到链接，因此我不能 100% 确定发生了什么，但一般来说，如果您转到链接

{{#linkTo myRoute myVar}} A Link {{/linkTo}}

该路由不运行 model 函数，您只需从 myVar 作为模型开始(但您仍然执行 setupController 函数) 。

因此，为了使硬链接(hard link)正常工作，您需要一个 model 函数来收集链接变量传入的信息。