If we successfully define a select-kit component within a plugin we are easily able to use it within a *.hbs template file using its pluginApiIdentifiers however, in order to attach that component within a widget using JS code I am not able to make it work. For instance: I have: import DropdownSel…

That’s merged - let us know how you get on with it @merefield

Bingo! Component is now appearing in my TC-based widget, even data is populated correctly, awesome beans! :rocket: Thanks for the amazing turnaround straddling the UK Bank Holiday! I know that widgets handle click events, but what if my Component has an event which fires an action, where can I ha…

Oops David, just seen an example, I’m studying it! app/assets/javascripts/discourse/tests/integration/components/widgets/render-glimmer-test.js 3e010bc88 label: "rerender", className: "triggerRerender", action: "dummyAction…

Yup, that’s probably the best reference. I don’t think we’ve passed actions ‘for real’ yet in core, so shout if you run into any issues. Looking at that test again, I suspect the actionForComponentToTrigger() function will need an @bind above it to make sure this works correctly within it.

OK this works to an extent: contents.push( new RenderGlimmer( this, "div.tag-chooser-component", hbs`<TagChooser @id="list-with-tags" @tags={{@data.chosen}} @onChange={{action @data.onChangeUpdateTagSet}}/> <button onClick={{@data.actionForClick}} label="b…

I suspect you’ll need to use widget ‘state’ rather than accessing this.chosen - widget instances are short-lived and ‘stateless’. You’ll get a new instance on each re-render, which means that this.chosen will be reset.

this.state is undefined within the change function, so that makes things a bit tricky? (I can pass it in, but that overwrites the data coming from the component to tell me what’s been chosen onChangeUpdateTagSet: this.onChangeUpdateTagSet(this.state), )

Are you able to share more of the widget code? IIRC for state to work you need to define a buildKey and a defaultState() method. I’ll see if I can add add an example of this kind of thing in the MountWidget tests :eyes:

[画像] David Taylor: for state to work you need to define a buildKey and a defaultState() method. Yeah, I have those defined. I’ll tidy and push to a repo. A test demonstrating a form of two way binding with an embedded Component would be extremely helpful! :pray:

[画像] Robert: this.state is undefined within the change function, so that makes things a bit tricky? I was able to access that, and the scheduleRerender() function. Updated tests and docs in DEV: Improve testing and documentation of RenderGli…

ウィジェット内のコンポーネントをレンダリングする（プラグインコード内で select-kit コンポーネントを使用）

開発

merefield (Robert) 2024 年 3 月 6 日午後 4:50 33

FYI このコンポーネントは Discourse Bars 🍻 🍸 (a sidebar framework) をサポートしています

「いいね！」 2

トピック		返信	表示
How to render Component inside Widget? Development	3	2144	2017 年 7 月 28 日
A tour of how the Widget (Virtual DOM) code in Discourse works Development	75	29101	2023 年 7 月 10 日
How to attach a component to a widget with just markup? Development	0	783	2018 年 3 月 9 日
Render Component in Widget Development	1	390	2023 年 6 月 27 日
Rendering Component in decorativeWidget API Development	4	1548	2022 年 8 月 26 日

ウィジェット内のコンポーネントをレンダリングする（プラグインコード内で select-kit コンポーネントを使用）

関連トピック