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

});

这是我用来获取对象并将它们绑定到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/

如果添加换行符，则selectpicker不起作用。

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

几个月前，我有同样的iusse。问题是该网站没有正确加载js文件。这些是我尝试的东西，其中一个解决了我的问题。

如果您也在此网站上使用您的布局，请删除： <script src="~/scripts/jquery-3.1.1.js"></script>让你感到高兴已经将jquery添加到您的布局中 @Scripts.Render("~/bundles/jquery")
不是像<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>}
为您的css文件执行相同的操作，但是这样：bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css";并使用它们：@section Styles{ @Styles.Render("~/bundles/cssbundlename")}

渲染后选择选择器

2 个答案: