使用来自Elm的引导选择 [英] Using bootstrap-select from elm

问题描述

A正在尝试使用 bootstrap-select -扩展了具有良好功能和样式的html-select-tag.乍一看，从榆树中调用它似乎很简单.确实，被抢断的

A am trying to use bootstrap-select - a javascript/css library extending the html-select-tag with nice features and style. At first glance, calling it from elm seems simple. Indeed, the snipped

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

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

yields a nice (searchable) select box with two items. However, things get complicated in dynamic situations. Suppose our elm model is a boolean deciding wether the select box is shown or not.

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节点.也就是说，我们必须致电

When loading the page, we see again a nice select box which disappears when hitting the toggle button. However, when hitting the toogle button again, the select box will not appear again! The reason is that selectpicker nodes are required to be refreshed if content has changed (including enabling/disabling the node). That is, we have to call

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

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

from the outside Javascript world after our select box has been added to the DOM again.

我尝试使用端口来解决该问题，但是不幸的是，我只得到Elm在渲染前触发事件.因此，我还必须使用 setTimeout 来等待完成，这很hacky.我想必须有一个使用自定义元素的简洁解决方案，但是同样，我也无法弄清楚如何在适当的时候调用刷新函数.

I tried to solve that problem using ports, but unfortunately I only got elm to fire an event before rendering, so I additionally had to use setTimeout to wait for completion, which is quite hacky. I suppose there must be a neat solution using a custom element, but again, I was not able to figure out how to call the refresh function at the right moment.

任何帮助将不胜感激！

推荐答案

最后，我设法将bootstrap-select包装到一个(最小的，不完美的)自定义元素中，该元素会在更新时自动刷新.在这里:

Finally, I managed to wrap bootstrap-select into a (minimal, nonperfect) custom element which automatically refreshes on updates. Here it is:

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创建为

This element can be created from HTML as

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

或来自榆树，

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

，它也可以在上述动态情况下使用.但是，一个明显的缺点是必须将项目列表提供给编码为json字符串的lit-select属性.因此，标记的可能性相当有限(例如，用户无法决定是否允许随意选择一堆选项或一堆选项组).

and it also works in dynamic situations as above. However, an obvious drawback is that the item list has to be given to a lit-select attribute encoded as a json string. So the markup possibilities are rather limited (for example, the user cannot decide wether to give lit-select a bunch of options or a bunch of option groups).

我很高兴看到更好的解决方案，但是由于这是另一个主题，因此我将尽快提出后续问题.

I would be happy to see better solutions but since this is another topic, I will start a followup question soon.

这篇关于使用来自Elm的引导选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！