javascript - 使用来自榆树的引导选择
问题描述
我正在尝试使用bootstrap-select - 一个扩展 html-select-tag 的 javascript/css 库,具有很好的功能和样式。乍一看,从 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" ]
加载页面时,我们再次看到一个漂亮的选择框,当点击切换按钮时它会消失。但是,当再次点击togle按钮时,选择框不会再次出现!原因是如果内容发生更改(包括启用/禁用节点),则需要刷新 selectpicker 节点。也就是说,我们必须调用
$('.selectpicker').selectpicker('refresh');
在我们的选择框再次添加到 DOM之后,来自外部 Javascript 世界。
我试图使用端口来解决这个问题,但不幸的是我只有在渲染之前让 elm 触发一个事件,所以我还不得不使用setTimeout
等待完成,这很 hacky。我想必须有一个使用自定义元素的巧妙解决方案,但同样,我无法弄清楚如何在正确的时刻调用刷新函数。
任何帮助是极大的赞赏!
解决方案
最后,我设法将 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 属性。所以标记的可能性是相当有限的(例如,用户不能决定是给 lit-select 一堆选项还是一堆选项组)。
我很高兴看到更好的解决方案,但由于这是另一个主题,我将很快开始一个后续问题。
推荐阅读
- r-leaflet - R - 传单限制 - 传单地图支持多少个标记?
- python - 分配已知值而不是计算它们?
- robotframework - 尝试使用追加到文件引发 AttributeError 异常
- go - 由于编码,Unmarshal 返回空白对象
- javascript - 尝试将涉及 webrtc 的脚本转换为 async/await 失败
- jquery - 如何在ajax post请求asp.net core mvc razor中发送对象数组
- trello - Roblox Trello 新卡
- javascript - 如何打印 JavaScript 函数的原始字符串
- python - 猜数字游戏(Python)
- python - 使用 Keras 进行预处理时出现内存错误