javascript - 渲染后的选择器

Question

我使用 Knockout，我的问题是我似乎无法渲染 Selectpicker。我将直接跳入一些代码，以帮助自己解释。

脚本:

<script src="~/scripts/jquery-3.1.1.js"></script>


<script src="~/Scripts/knockout-3.4.2.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/bootstrap-select.min.js"></script>

CSS

<link rel="stylesheet" href="~/Content/bootstrap-select.min.css">

这是我需要渲染下拉框的脚本。

$(document).load(function () {
    $(".selectpicker").selectpicker({
        liveSearch: true,
        showSubtext: true
    });

});

这是我用来获取对象并将它们绑定(bind)到 View 的 Ajax。

 $.ajax({
            type: "GET",
            url:  "@Url.Action("GetView", "Medarbejders", new {area = "" , id = ViewBag.id})",
        }).done(function (data) {
            $(data).each(function (index, element) {
                var mappedItem =
                    {
                        Id: ko.observable(element.Id),
                        MedarbejderId: ko.observable(element.MedarbejderId),
                        Mode: ko.observable("edit")
                    };
                console.log(mappedItem);
                viewModel.lookupCollection.push(mappedItem);
            });



            ko.applyBindings(viewModel);
            // Here is where i think i would need to Render the script. But getting an Error see futher down.

        });
    });

这将我带到我的模板。

 <tbody data-bind="foreach: lookupCollection">

        <tr data-bind="template: { name: Mode, data: $data }"></tr>

    </tbody>
</table>

<script type="text/html" id="display">






    <td data-bind="text: MedarbejderId"></td>


    <td>
        <button class="btn btn-success kout-edit">ændre</button>
        <button class="btn btn-danger kout-delete">slet</button>
    </td>


</script>

<script type="text/html" id="edit">



    <td><u>Medarbejder</u><br />@Html.DropDownList("MedarbejderId", (SelectList)ViewBag.MedarbejderId, "Vælg medarbejdere", htmlAttributes: new
                           {
                               @data_bind = "value: MedarbejderId",
                               @class = "selectpicker form-control",
                               data_show_subtext = "true",
                               data_live_search = "true"

                           })
    </td>

如果我使用开发人员工具检查我的页面，我会在控制台中收到错误“.selectpicker 不是 jquery 中的函数”有人可以帮助我吗？过去几天一直遇到这个错误。

当放入渲染脚本时，这是我得到的错误。

Uncaught TypeError: $(...).selectpicker is not a function

JsFiddle: http://jsfiddle.net/7RDc3/5854/

如果添加换行符，选择器将不起作用。

Answer 1

只需将其添加到您的 addGifts 函数中即可:

self.addGift = function() {
    self.gifts.push({
        name: "",
        price: ""
    });
    $(".selectpicker:visible").selectpicker({
        liveSearch: true,
        showSubtext: true
    });
};

$(".selectpicker:visible") 只会初始化尚未初始化的选择器，即。可见。

工作 fiddle : http://jsfiddle.net/7RDc3/5855/