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)
根据前任检查员的说法，新饮料也被正确地推入商店。
我想也许它正在更新局部变量而不是菜单控制器属性，所以我也试过类似this.get("menuController").set('drinkArray', drinkArray)的东西，但结果相同

Answer 1

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

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

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

1 个答案: