Question

我有一个带有2个部分的Web应用程序（使用ember 2.0）。左菜单和正确的内容，彼此独立。导航到路由名称“PageRoute”，应用程序从服务器加载配置JSON，处理它和检查，应该在哪里呈现内容：

{
...
position: "left",
...
}

或

{
...
position: "right",
...
}

然后我使用“this.transitionTo”并将其重定向到RightRoute或LeftRoute。 RightRoute没问题，LeftRoute就是问题。

开头 - 左侧菜单为空。当加载LeftRoute时，它应该追加（而不是替换）某个菜单（渲染的模板或组件）。再次加载LeftRoute时，应从模型渲染新菜单并将其附加到现有的左菜单，以便可以在渲染菜单之间切换，最后一个菜单将可见。同时，当交换当前菜单时，应该从“左侧菜单列表”中删除它，并且可以看到上一个菜单。

我发现一些附加View的解决方案，但是在Ember 2.0中不推荐使用该视图，我试图像http://emberjs.jsbin.com/defapo/3/edit?html,js,output那样进行操作，但是Router无法访问组件中的操作（使用pushObject）和我尝试过无数其他方法，比如使用数据存储或动态修改模型等。

Answer 1

我会这样做：

<强> /controllers/left.js

  $('#metricupdate').change(metricUpdate); 
  $('#imperialupdate').change(imperialUpdate); 

  // BMI
    var bmitest;
  // Metric Update Function
    function metricUpdate() {
      setTimeout(function() {
        var heightval = parseInt($('#height').val());
        var weightval = parseInt($('#weight').val());
        var bmicalc = weightval / (heightval / 100 * heightval / 100); // BMI Formula
        var bmi = Math.round(bmicalc * 1) / 1;
        bmitest = bmi; // BMI Value <-- Value From Here
        // BMI Value
        $('#bmi').text(bmitest); // <-- Value to Here
        console.log(bmitest);
      }, 10);
    }
  // Imperial Update Function
    function imperialUpdate() {
      setTimeout(function() {
        var feet = parseInt($('#feet').val());
        var inches = parseInt($('#inches').val());
        var stone = parseInt($('#stone').val());
        var pounds = parseInt($('#pounds').val());
        var imperialCalc = ((stone*14)+pounds)/((feet*12+inches)*(feet*12+inches))*703; // BMI Formula
        bmitest = imperialCalc.toFixed(1); // BMI Value <-- Value From Here
        // BMI Value
        $('#bmi').text(bmitest); // <-- Value to Here
        console.log(bmitest);
      }, 10);
    }

<强> /routes/left.js

.text()

<强> /templates/left.hbs

import Ember from 'ember';
export default Ember.Controller.extend({

    menus: [],

    addMenu (menuData) {
        this.get('menus').addObject(menuData);
    },

    removeMenu () {
        this.get('menus').popObject();
    }

});

在这种情况下，当您import Ember from 'ember'; export default Ember.Route.extend({ setupController (controller, model) { controller.addMenu(model); } });时，它会将菜单附加到列表中。当您需要删除最后一个菜单时，您可以在任何其他路线中{{#each menus as |menu| }}  {{log menu}} {{/each}}（例如在您的PageRoute中）。

希望这有帮助。

Ember JS - 从路线动态渲染模板并追加

1 个答案: