Render a component within a Widget. (Using select-kit components within plugin code)

[merefield (Robert)]

@david

para que o estado funcione, você precisa definir um buildKey e um método defaultState().

Sim, eu os tenho definidos. Vou organizar e enviar para um repositório.

Um teste demonstrando uma forma de two-way binding com um Componente embutido seria extremamente útil!

[david (David Taylor)]

@merefield

this.state está indefinido dentro da função de alteração, então isso torna as coisas um pouco complicadas?

Consegui acessar isso e a função scheduleRerender(). Testes e documentação atualizados em

DEV: Improve testing and documentation of RenderGlimmer actions

Apenas confirmando - seu @bind é importado de discourse-common/utils/decorators?

[merefield (Robert)]

@david

seu @bind é importado de discourse-common/utils/decorators?

Confirmado

Aqui está o repositório: GitHub - merefield/discourse-tc-bars-tag-intersection-chooser: A small widget to allow you to navigate to a topic list based on a combinations of tags

E o arquivo do widget especificamente: layouts-tag-intersection-widget/layouts-tag-combo.js.es6 at master · paviliondev/layouts-tag-intersection-widget (github.com)

Muito em andamento e não funcionando como declarado.

(Requer o plugin Layouts instalado e configurado para testar como está, mas é trivial extrair o código do widget)

[david (David Taylor)]

Ah, acho que isso pode ajudar:

- @onChange={{action @data.onChangeUpdateTagSet}}/\u003e
+ @onChange=@data.onChangeUpdateTagSet/\u003e

Ao passar uma ‘closure action’, não há necessidade do helper (action (e, neste caso, acho que na verdade quebra as coisas)

[merefield (Robert)]

Isso parece resultar em TypeError: this.attrs.onChange não é uma função?

Mas sim, talvez esse helper esteja mascarando os atributos disponíveis?

[david (David Taylor)]

Ah, desculpe, precisamos de algumas chaves ali, caso contrário, será analisado apenas como um atributo de string.

- @onChange={{action @data.onChangeUpdateTagSet}}/\u003e
+ @onChange={{@data.onChangeUpdateTagSet}} /\u003e

[merefield (Robert)]

Infelizmente, isso resulta no mesmo erro?

[david (David Taylor)]

Você pode adicionar um ponto de interrupção e descobrir qual é o valor de this.attrs.onChange? (O recurso “pausar na exceção” nas ferramentas de desenvolvedor pode ajudar aqui)

[merefield (Robert)]

@David e eu resolvemos isso via PM:

@david

Acontece que, em widgets, @bind só funciona para Widgets definidos usando a sintaxe de classe. É por isso que funciona no teste - eu estava fazendo class Blah extends Widget { ... }.

Para widgets não baseados em classe, você precisará vincular a função manualmente como

hbs`<UserMenu::Menu @closeUserMenu={{@data.closeUserMenu}} />`,
{
  closeUserMenu: this.closeUserMenu.bind(this),
}

Muito obrigado pelo seu tempo, @David.

Publicarei o TC assim que estiver completo.

[merefield (Robert)]

Isso agora é uma coisa, embora um pouco grosseiramente finalizado no momento:

Requer o Plugin de Layouts.

Repositório do Componente Temático aqui: GitHub - merefield/discourse-tc-bars-tag-intersection-chooser: A small widget to allow you to navigate to a topic list based on a combinations of tags

[merefield (Robert)]

FYI este componente também suporta blocos da barra lateral direita agora!

[merefield (Robert)]

Para sua informação, este componente suporta Discourse Bars 🍻 🍸 (a sidebar framework)