javascript - 从另一个组件 Ember 重新渲染一个组件
问题描述
我试图在单击component
另一个时重新渲染一个特定component
的。当用户单击特定的button component
时,一个变量会sessionStorage
发生变化,另一个变量会使用该变量component
来显示数据。单击后,我希望该特定组件重新呈现自身。我在 component 中看到了Ember Re-render 组件和Ember Rerendering 组件,但它们似乎不适用于我的情况。这是我的文件:
模板/组件/按钮/按钮取消.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}}
组件/按钮/按钮取消.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}}
components/field-list-headers(需要重新渲染的组件)
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
它派生逻辑按钮文本并通过以下方式切换mode-service
'mode
属性toggleMode
:
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 中,服务是单例的,因此这种共享在许多情况下是合适的。对我来说,这比任何其他实际存储/检索对组件本身的引用并调用其渲染函数的解决方案都要好得多。
推荐阅读
- java - 拖动时初始化 Viewpager 视图
- java - @WebServlet 注解传递动态生成的 url 模式列表
- typo3 - 错字3 8.7 图像调整大小无法正常工作
- ios - iOS 状态栏将 InAppBrowser 向下推
- angularjs - 在 ionic 1 中过滤和选择 ng-repeat
- jmeter - 从 JMeter 5.0 中的调度程序中删除开始时间和结束时间
- ruby-on-rails - Rails Postgres:在 login_activity 和印象派中获取最高频率记录
- spring - 在 Spring Boot 中为 POST 传递 JSessionId 和 CSRF-Token
- java - 删除包含特定单词的 jsonnode
- javascript - 如何在某些 woocomerce 产品上添加按钮