Question

我使用ember设计了一个页面（主页）并在nodeJS上运行。在这个主页的左侧，我有一个垂直菜单。所有菜单项（值）都使用Web服务动态加载。

            {{#each}}
                {{#linkTo 'category' this}}
                    <ul id="{{unbound id}}" class="menu" onclick="popMenu('{{unbound title}}', '{{unbound id}}')">
                        <div id="{{unbound title}}">{{unbound title}}</div>
                    </ul>
                {{/linkTo}}
            {{/each}}

当用户点击任何这些菜单项时，将调用“类别”模板。

App.Router.map(function() {
    this.route("category", {path: ':title'});
});

App.CategoryRoute = Ember.Route.extend({
    model: function() {
       console.log('test');
    }
});

我在本地环境（localhost：3000）中测试了上述代码。当用户单击任何菜单项时，“类别”模板已成功加载并更改了网址（localhost：3000 /＃/ SELECTED_TITLE_VALUE）。

但是，我的'测试'日志不会打印在控制台中（我在我的CategoryRoute中打印。它使我的路由功能不被调用）。

任何人都可以指导我以下问题： - 当用户单击任何菜单项时，新模板将正确呈现（使用正确的URL更改）。但是，我的'CategoryRoute'没有被正确调用？

我的主要目标是：

当用户点击此左侧菜单时，我必须检索 selected_menu_item_id 并根据selected_menu_item_id调用新的网络服务。
我必须使用此Web服务响应，并在新呈现的模板中加载少量信息。

有人可以为我上面的场景指导控制器和模型。一些代码片段将非常有用。

谢谢。

Answer 1

路由的模型钩子仅在转换来自url时被触发，否则， linkto helper 和 transisionTo方法不会触发此钩子，因为通常你提供模型即

{{#link-to 'category' this}}

this关键字代表路线的模型......

http://emberjs.com/guides/routing/specifying-a-routes-model/

祝你好运

Answer 2

根据问题的最新答案/修改/澄清，这是另一个例子， http://emberjs.jsbin.com/UQIbEjU/1/edit

主要部分是

var selectedCategoryPath = null;
var categoryInformation = null;
App.CategoryRoute = Ember.Route.extend({
    beforeModel: function(transition) {
       selectedCategoryPath = transition.providedModels.category.id; //retrieves the value of selected menu id
       var category = Categories.create();
       categoryInformation= category.getCategoryInformation(); //When user clicks any menu item, a new template should be loaded with an webservice response. currently I have replaced my webservice code with an model data
       console.log(categoryInformation);
      this.set("categoryInfo",categoryInformation);
       return categoryInformation;
    },
    setupController: function(controller, model){
        controller.set('categoryInfo', this.get("categoryInfo"));
    }
});

App.CategoryController = Ember.Controller.extend({
  categoryInfo:null
});

因此，这是有效的，因为已创建具有属性categoryInfo的控制器，并且category.getCategoryInformation();中的数据（beforeModel）设置为该属性。这是必需的，因为模板是

{{categoryInfo.description}}

同样在这种情况下，模型（setupController内）是由link-to分配的{id: 1, title: "item 1"}，{id: 2, title: "item 2"}等等。没有categoryInfo属性，因此必须设置控制器的categoryInfo属性。

在最新的决议中，您致电

setupController: function(controller, model){
        this._super(controller, categoryInformation);
    }

将categoryInformation数据指定为model到默认控制器，并且通过修改模板，{{description}}现在已存在，因为model/categoryInformation包含此信息

灰烬 - 检索所选菜单项并相应地加载模板

2 个答案: