[英]emberjs child component not re-rendering after property update
我有一個頁面組件(五個為什么),其中包含許多輸入,用戶可以選擇這些輸入來完成輸入。 當用戶單擊 finalize 時,所有問題都將被禁用。
五個為什么.hbs:
{{#each this.whys as |why i|}}
<Generic::RichTextInput
@value={{why.content}}
@onChange={{action this.whyChanged i}}
@disabled={{this.isFinalized}} />
{{/each}}
<button {{on "click" this.finalizeWhy}}>Finalize</button>
五個為什么
interface AnalyzeFiveWhysArgs {
dataStory: DataStory;
}
export default class AnalyzeFiveWhys extends Component<AnalyzeFiveWhysArgs> {
@alias("args.dataStory.fiveWhysAnalysis") fiveWhysAnalysis
@tracked
isFinalized: boolean = this.fiveWhysAnalysis.isFinalized ?? false;
@tracked
whys: LocalWhy[] = this.fiveWhysAnalysis.whys;
@tracked
isFinalized: boolean = this.fiveWhysAnalysis.isFinalized ?? false;
@action
async finalizeWhy() {
this.isFinalized = true;
}
當我的富文本組件只是一個常規文本區域時,這可以正常工作。 但是,我正在嘗試實現 tinymce,這需要我在 Embers 的小安全魔法空間之外做一些事情。
模板:
<textarea id={{this.id}} disabled={{this.templatePieceIsDisabled}}>{{@value}}</textarea>
Typescript:
interface GenericRichTextInputArgs {
value?: string;
onChange: (value: string) => void;
name: string;
disabled?: boolean;
}
export default class GenericRichTextInput extends Component<GenericRichTextInputArgs> {
constructor(owner: unknown, args: GenericRichTextInputArgs) {
super(owner, args);
this.initializeTinymce();
}
id = this.args.name;
get editor() {
return tinymce.get(this.id);
}
get settings() {
console.log(this.args.disabled);
const settings: TinyMCESettings = {
selector: `#${this.id}`,
setup: (editor: Editor) => this.setupEditor(this, editor),
readonly: this.args.disabled ? this.args.disabled : false
};
return settings;
}
initializeTinymce() {
Ember.run.schedule('afterRender', () => {
console.log("re-initializing"); // I expect to see this log every time the isFinalized property in the five-whys component changes. But I only see it on page load.
tinymce.init(this.settings);
});
}
setupEditor(self: GenericRichTextInput, editor: Editor) {
... // details of tinymce API
}
}
當我單擊 finalize 按鈕時,富文本組件中 disabled 標志的效果不會改變。
我正在使用的 tinymce 庫將文本區域顯示設置為無,將 aria-hidden 設置為 true。 這是因為它將文本區域包裝在一個小部件中。 所以我必須使用圖書館的 api 來設置禁用。
我想到了。 Ember 不會為更新生命周期事件運行構造函數。 所以我需要告訴 Ember 在重新渲染模板時重新運行初始化程序。 我不得不使用https://github.com/emberjs/ember-render-modifiers來做到這一點。
所以我的富文本編輯器模板看起來像:
<textarea
id={{this.id}}
{{did-update this.updateDisabled @disabled}}>
{{@value}}
</textarea>
我在富文本編輯器后面的代碼中添加了這個動作:
@action
updateDisabled(element: HTMLTextAreaElement, [disabled]: any[]) {
this.disabled = disabled;
this.editor.destroy();
this.initializeTinymce();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.