使用Elm引导程序选择

Question

A正在尝试使用bootstrap-select-一个javascript / css库，以漂亮的功能和样式扩展了html-select-tag。乍一看，从榆树中调用它似乎很简单。确实，被抢断的

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

产生一个带有两个项目的漂亮（可搜索）选择框。但是，在动态情况下事情变得复杂。假设我们的榆树模型是一个布尔值，决定是否显示选择框。

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');

来自外部JavaScript世界之后，我们的选择框已再次添加到DOM。

我试图使用端口来解决该问题，但是不幸的是，我只得到了榆木来触发事件before渲染，因此我还不得不使用setTimeout等待完成，这很麻烦。我想必须有一个使用自定义元素的巧妙解决方案，但是同样，我也无法弄清楚如何在适当的时候调用refresh函数。

非常感谢您的帮助！

Answer 1

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

import { LitElement, html, customElement, property } from 'lit-element';
import * as $ from 'jquery';
import 'bootstrap';
import 'bootstrap-select';

@customElement('lit-select')
export class LitSelect extends LitElement {

    @property({ type : Array }) items = []

    updated() {
        $(this).find(".selectpicker").selectpicker('refresh');
    }

    createRenderRoot() {
        return this;
    }

    private renderItem(item: string) {
        return html`
            <option>
                ${item}
            </option>
        `;
    }

    render() {
        return html`
            <select class="selectpicker" data-live-search = "true">
                ${this.items.map(item => this.renderItem(item))}
            </select>
        `;
    }
}

此元素可以从HTML创建为

<lit-select items='["foo", "bar"]'></lit-select>

或来自榆树为

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

并且它也可以在上述动态情况下使用。但是，一个明显的缺点是必须将项目列表提供给编码为json字符串的lit-select属性。因此，标记的可能性非常有限（例如，用户无法决定是否继续选择一堆选项或一堆选项组）。

我很高兴看到更好的解决方案，但是由于这是另一个主题，因此我将很快开始跟进问题。