将数据从应用程序控制器传递到子控制器

Question

我使用的是 Ember 1.13，我认为其中一些在 2.x 中已被弃用/更改，但此项目不会升级。

也许我没有以正确的方式解决这个问题，或者遗漏了一些简单的东西。无论哪种方式，我需要做的是在模态中添加一种新饮品，然后使用该新饮品更新菜单数据（作为表格中的一行）。

我在父管理控制器 (admin.menu) 中有一个菜单控制器。我有一个要添加数据的模态，并且模态似乎需要位于任何插座之外的应用程序控制器中，否则它无法正确呈现。所以，我在应用程序控制器的一个动作中添加了新饮料。

// controllers/application.js
export default Ember.Controller.extend({
  menuController: Ember.inject.controller('admin.menu'),

  ...

  actions: {
    submitCustomDrink: function(){
      // action to create a new custom drink item
      let element = document.getElementById("custom-drink-name");
      let drinkType = element.value;

      Ember.$.ajax({
        'url': `${Config.apiRoot}store-drinks/custom/`,
        'method': 'POST',
        'data': {
          drink_name: drinkType
        }
      }).then(data => {
        // Add new drink to the existing drinks list
        let drinkArray = this.get("menuController.drinkArray");
        let drinkObject = {
          "drinkType": drinkType,
          "drinkSet": data
        };

        drinkArray.push(drinkObject);

        data.forEach(drink => {
          this.store.push('store-drink', drink);
          console.log(`pushed ${drink.type} of ${drink.size} into store`);
        });

        // reset modal input
        element.value = "";
      }, function(err){
        console.log('error', err);
      });
    }
  }
});

在该应用程序控制器中，我正在注入菜单控制器，该控制器使用我正在添加的数据。

当我添加新饮料时，我希望templates/admin/menu.hbs 的桌子可以多出一排。这些行是从使用控制器中的drinkArray 的组件生成的。

<tbody>
{{#each drinkArray as |drink|}}
  {{joe-menu-row drinkSet=drink.drinkSet type=drink.drinkType detailDrink=detailDrink}}
{{/each}}
</tbody>

• 此代码在加载页面、获取所有饮料并创建行时起作用。
• 添加新饮品并重新加载页面后，新饮品会出现，但我需要它在不重新加载页面的情况下显示。
• 通过应用程序控制器中的控制台日志，我看到this.get("menuController.drinkArray") 返回饮料列表，以及在运行drinkArray.push(drinkObject) 后返回新饮料作为其中的一部分
• 据 ember 检查员称，新的饮料物品也被正确推入商店
• 我认为可能是更新了局部变量而不是菜单控制器属性，所以我也尝试了类似 this.get("menuController").set('drinkArray', drinkArray) 的方法，但结果相同

Answer 1

如果没有完整的代码示例，很难确定，但看起来您的问题可能是使用 push 而不是 pushObject。后者will trigger observers and dependencies，这将导致您的模板重新呈现。

您可能还想查看ember-wormhole 作为将模态对话框呈现到顶级应用程序模板的一种方式，而无需从应用程序控制器执行此操作。