渲染后的选择器

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

});

这是我用来获取对象并将它们绑定到视图的 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") 只会初始化尚未初始化的选择选择器，即。可见。

工作小提琴： http://jsfiddle.net/7RDc3/5855/

Answer 2

几个月前我也有同样的问题。因为问题是该站点没有正确加载 js 文件。这些是我尝试过的事情，其中​​一个解决了我的问题。

1. 如果您也在此站点上使用您的布局，请删除： <script src="~/scripts/jquery-3.1.1.js"></script> 因为你是 已经将 jquery 添加到您的布局中 @Scripts.Render("~/bundles/jquery")
2. 不要像 <script src="~/scripts/filename.js"></script> 这样添加你的 js 文件，而是像这样将它们添加到你的 BundleConfig 中：bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/path-to-your-js/jsname.js")); 并像这样使用它们： @section Scripts{ @Scripts.Render("~/bundles/jsbundlename") <script type="type= text/javascript"> //js-code</script>}
3. 对你的 css 文件做同样的事情，但是像这样：bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css"; 并像这样使用它们：@section Styles{ @Styles.Render("~/bundles/cssbundlename")}