Javascript 使用bootstrap从elm中选择

我正在尝试使用一个javascript/css库，它扩展了HTMLSELECT标记，并具有很好的特性和样式。乍一看，从elm起称呼它似乎很简单。事实上，这只猫被剪掉了

view : Model -> Html Msg
view model =
  select [ class "selectpicker", attribute "data-live-search" "true" ]
    [ option [] [ text "foo" ]
    , option [] [ text "bar" ]
    ]

生成一个包含两个项目的漂亮（可搜索）选择框。然而，在动态环境中，事情变得复杂起来。假设我们的elm模型是一个布尔值，决定选择框是否显示

type alias Model = Bool

init : Model
init = True

update : Msg -> Model -> Model
update Toggle model = not model

view : Model -> Html Msg
view model =
  if model then
    div []
    [ select [ class "selectpicker", attribute "data-live-search" "true" ]
        [ option [] [ text "foo" ]
        , option [] [ text "bar" ]
        ]
    , button [ onClick Toggle ] [ text "toggle" ]
    ]
    else
      button [ onClick Toggle ] [ text "toggle" ]

当加载页面时，我们再次看到一个漂亮的选择框，当点击切换按钮时，该框消失。但是，当再次点击toogle按钮时，选择框将不会再次出现！原因是，如果内容发生更改（包括启用/禁用节点），则需要刷新selectpicker节点。就是我们要打电话

$('.selectpicker').selectpicker('refresh');

在我们的选择框再次添加到DOM之后，从外部Javascript世界

我试图使用端口解决这个问题，但不幸的是，我只让elm在渲染之前触发了一个事件，因此我还不得不使用

setTimeout

等待完成，这是非常令人讨厌的。我想一定有一个使用自定义元素的简洁解决方案，但我还是无法弄清楚如何在适当的时候调用refresh函数

---

非常感谢您的帮助

最后，我设法将bootstrap select包装成一个（最小的、非完美的）自定义元素，该元素在更新时自动刷新。这是：

从'lit element'导入{LitElement，html，customElement，property}；
从“jquery”导入*为$；
导入“引导”；
导入“引导选择”；
@customElement（'lit-select'）
导出类LitSelect扩展了LitElement{
@属性（{type:Array}）项=[]
更新的（）{
$（this.find（“.selectpicker”）.selectpicker（'refresh'）；
}
createRenderRoot（）{
归还这个；
}
私有renderItem（项：字符串）{
返回html`
${item}
`;
}
render（）{
返回html`
${this.items.map（item=>this.renderItem（item））}
`;
}
}

此元素可以从HTML创建为

或者来自elm as

node "lit-select" [ attribute "items" "[\"foo\",\"bar\"]" ] []

它也可以在上述动态情况下工作。 然而，一个明显的缺点是项目列表必须被赋予编码为json字符串的lit select属性。因此，标记的可能性相当有限（例如，用户无法决定是给lit select一组选项还是给lit select一组选项组）

---

我很乐意看到更好的解决方案，但由于这是另一个主题，我将很快开始后续问题。

这似乎是@glennsl的教科书示例谢谢你的提示！如果我理解正确，这意味着我必须在之前将selectpicker库包装到web组件中？是的，除非你足够幸运，它已经附带了一个，或者其他人已经制作了一个。@glennsl不幸的是，我已经尝试过这种方法，最终失败了。因此，在任何情况下，我都需要进一步的建议。在一些边缘情况下，您也需要在自定义元素的

connectedCallback

中使用

setTimeout

。因此，定制元素可能不值得这么做。