[英]Pass data from application controller to child controller
I'm using Ember 1.13, I think some of this has been deprecated/changed in 2.x, but this project will not be upgraded. 我使用的是Ember 1.13,我认为其中一些已在2.x中弃用/更改,但该项目不会升级。
Maybe I'm not going about this the right way, or missing something simple. 也许我没有以正确的方式进行操作,或者缺少一些简单的方法。 Either way, what I need to do is add a new drink in a modal and then update the menu data with that new drink (as a row in a table).
无论哪种方式,我需要做的是在模式中添加新饮料,然后使用该新饮料(在表中一行)更新菜单数据。
I have a menu controller inside a parent admin controller (admin.menu). 我在父管理员控制器(admin.menu)内有一个菜单控制器。 I have a modal where I'm adding data, and the modal seems to need to be in the application controller outside of any outlet, or else it does not render correctly.
我有一个要在其中添加数据的模式,该模式似乎需要位于任何出口之外的应用程序控制器中,否则它将无法正确呈现。 So, I'm adding the new drink within an action in the application controller.
因此,我在应用程序控制器的一个动作中添加了新饮料。
// 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);
});
}
}
});
In that application controller, I'm injecting the menu controller which uses the data that I'm adding. 在该应用程序控制器中,我将注入使用要添加的数据的菜单控制器。
When I add a new drink, I'm expecting a table in templates/admin/menu.hbs
to have an extra row. 当我添加新饮料时,我期望
templates/admin/menu.hbs
的表格会有额外的一行。 The rows are generated from a component that uses the drinkArray
from the controller. 这些行是从使用控制器中的
drinkArray
的组件生成的。
<tbody>
{{#each drinkArray as |drink|}}
{{joe-menu-row drinkSet=drink.drinkSet type=drink.drinkType detailDrink=detailDrink}}
{{/each}}
</tbody>
this.get("menuController.drinkArray")
returns the list of drinks, as well as returning the new drink as part of it after running drinkArray.push(drinkObject)
this.get("menuController.drinkArray")
返回饮料列表,并在运行drinkArray.push(drinkObject)
之后返回新饮料作为其一部分。 this.get("menuController").set('drinkArray', drinkArray)
, but have the same results this.get("menuController").set('drinkArray', drinkArray)
,但结果相同 It's hard to say for sure without a full code sample, but it looks like your problem might be using push
instead of pushObject
. 没有完整的代码示例很难确定,但是看起来您的问题可能是使用
push
而不是pushObject
。 The latter will trigger observers and dependencies , which will cause your template to rerender. 后者将触发观察者和依赖关系 ,这将导致您的模板重新呈现。
You may also want to look into ember-wormhole as a way of rendering a modal dialog into the top-level application template, without having to do so from the application controller. 您可能还需要研究ember-wormhole,作为一种将模式对话框呈现到顶级应用程序模板中的方法,而不必从应用程序控制器中进行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.