[英]Re render a component from another component Ember
單擊另一個component
時,我試圖重新渲染一個特定的component
。 當用戶單擊特定的button component
, sessionStorage
的變量將更改,另一個component
將使用該變量來顯示數據。 單擊后,我希望該特定組件重新呈現自己。 我已經在該組件中看到了Ember Re-render組件和Ember Rerendering組件 ,但是在我看來,它們似乎不起作用。 這是我的文件:
模板/組件/按鈕/button-cancel.hbs
{{#each-in metaData as |module definition|}}
{{#if (eq definition.name "cancel_button") }}
<button class={{definition.css_class}} {{action "changeToAccounts"}}> Accounts </button>
{{/if}}
{{/each-in}}
{{yield}}
組件/按鈕/button-cancel.js
import Component from '@ember/component';
import MD from "../../utils/metadata";
export default Component.extend({
init: function() {
this._super(...arguments);
this.metaData = MD.create().getMetaViewStuff("Leads", "record", "buttons");
// console.log(this.metaData);
},
actions: {
changeToAccounts: function() {
sessionStorage.setItem('module', "Accounts");
}
}
});
模板/組件/面板/list-panel.hbs
{{buttons/button-save}} <!--This button is same as button-cancel-->
{{buttons/button-cancel}}
{{field-list-headers}}
{{yield}}
組件/字段列表標題 (需要重新渲染的組件)
import Component from '@ember/component';
import MD from "../utils/metadata"
export default Component.extend({
init: function(){
this._super(...arguments);
this.metaData = MD.create().getMetaViewStuff(sessionStorage.getItem('module'), "list", "panels")
}
});
函數getMetaViewStuff
getMetaViewStuff: function(module, submodule, item, i18n) {
if (this.modules[module]["views"][submodule]["meta"] !== undefined && this.modules[module]["views"][submodule]["meta"][item] !== undefined) {
let meta = this.modules[module]["views"][submodule]["meta"][item];
return meta;
}
return false;
}
我的建議是通過服務共享相同的屬性,並使用該服務更新本地存儲並在該服務上緩存值。 我提供了一個示例 ,該示例使用服務在兩個組件之間共享值(我不能在旋轉中使用本地存儲)。
因此,假設我們要以表或有序列表的形式顯示編程語言的列表。 我們有兩個組件,用於切換模式的可重用mode-changer
按鈕和用於實際呈現列表的programming-languages
組件,它們都與共享mode-service
交互。
export default Ember.Service.extend({
init(){
this._super(...arguments);
//actually read from local storage here and set default on null
this.set('mode', 'list');
},
toggleMode(){
let newValue = this.get('mode') === 'list' ? 'table' : 'list';
//actually store to local storage here before caching on the service
this.set('mode', newValue);
}
});
想象一下,該模板顯示了兩個組件:
{{programming-languages languages=languages}}
{{mode-changer}}
mode-changer
注入mode-service
,通過它可以導出邏輯按鈕文本,並通過toggleMode
切換mode-service
的mode
屬性:
export default Ember.Component.extend({
modeService: inject(),
buttonText: computed('modeService.mode', function(){
let mode = this.get('modeService.mode');
return mode === 'list' ? "Change to table" : "Change to list";
}),
actions: {
toggleMode(){
let modeService = this.get('modeService');
modeService.toggleMode();
}
}
});
mode-changer
組件:
<button onclick={{action 'toggleMode'}}>{{buttonText}}</button>
programming-languages
組件通過計算屬性將其呈現模式基於modeService.mode
:
export default Ember.Component.extend({
modeService: inject(),
renderList: computed('modeService.mode', function(){
let mode = this.get('modeService.mode');
return mode === 'list';
})
});
因此對modeService.mode
更改將導致計算的屬性無效並觸發組件的呈現。
{{#if renderList}}
<ol>
{{#each languages as |language|}}
<li>{{language}}</li>
{{/each}}
</ol>
{{else}}
<table>
<th>Language</th>
{{#each languages as |language|}}
<tr>{{language}}</tr>
{{/each}}
</table>
{{/if}}
在Ember中,服務是單例的,因此這種共享在許多情況下是適當的。 對我來說,這比任何其他實際存儲/檢索對組件本身的引用並調用其渲染功能的其他解決方案要好得多。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.