第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

emberjs:Glimmer Web 組件傳遞數組/對象不起作用

emberjs:Glimmer Web 組件傳遞數組/對象不起作用

茅侃侃 2021-12-12 15:53:00
我們的業(yè)務問題陳述之一是,我們必須創(chuàng)建組件,以便任何消費者都可以將它們用作小部件并嵌入到他們的網站中。問題是我們已經有了用 ember 制作的那些組件。我們不知道消費者網站將擁有哪個堆棧,這可能是隨機的。所以我們想到了將這些 ember 組件轉換為 web 組件。我們做了一個小的 POC,我們無法使用 glimmer 從 ember 組件中創(chuàng)建 web 組件。但我們面臨幾個問題我們無法通過 glimmer 將對象/數組傳遞給 Web 組件(我們嘗試使用通過屬性傳遞它)當 web 組件被渲染時,shadow DOM 以某種方式不起作用為了使用簡單的微光組件,我遵循了https://glimmerjs.com/guides/using-glimmer-as-web-components
查看完整描述

1 回答

?
森欄

TA貢獻1810條經驗 獲得超5個贊

要旨:


主意


這個想法是創(chuàng)建與框架無關的組件,以便它可以完美地在不同的應用程序中使用。該組件已經用 emberjs 編寫。


解決方案


解決方案是編寫明顯的 web 組件,但我們已經用 emberjs 插件編寫了我們的代碼。所以我們決定將附加項目遷移到最新的 ember,在我們將附加組件遷移到 glimmerjs 并將該 glimmerjs 組件轉換為 web 組件(使用@glimmer/web-component)并使用它之后。


我們付出了努力,讓它發(fā)揮了作用。我正在分享我們應用的當前解決方案。


正如我在問題中提到的,我們面臨著一些挑戰(zhàn)。我會一一解答。


為了在兩個組件之間傳遞對象,我們通過提高CustomEventfromchild-component來傳遞它parent-component


didInsertElement() {

    this.element.dispatchEvent(

      new CustomEvent('data-ready', { bubbles: true, detail: this })

    );

}

經過研究發(fā)現,glimmer不支持shadow DOM,目前他們也沒有任何支持的計劃。一旦我們認為shadow-dom擁有特性是好的,就重新分析需求。我們正在使用 CSS 特異性(傳統(tǒng)方式)來隔離特定于組件的 CSS :p


盡管在應用上述內容后,我們的狀態(tài)良好。如果你想看看代碼。請檢查此github 存儲庫(初始外觀)


查看完整回答
反對 回復 2021-12-12
  • 1 回答
  • 0 關注
  • 165 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號