Question

我正在使用Knockout来创建动态表单。我有一个表，用户可以通过单击按钮向表中添加新行。我的Bootstrap selectpicker出现在第一行，但不出现在按钮点击添加的新行中。这是一个截图：

我的研究表明，当动态添加Bootstrap选择时（就像在这种情况下一样），每次都需要渲染它。它可以这样呈现：

$('.selectpicker').selectpicker('render');

这似乎是这种情况，因为我在我的代码中的几个地方尝试了渲染。然而，尽管进行了几个小时的修补，我还是无法在每次点击按钮时正确渲染它。例如，有时它会在每行上呈现两个或更多选择选择器。这是我完整的Razor页面代码：

@model Birder2.ViewModels.CreateObservationViewModel
@using Microsoft.AspNetCore.Identity
@inject UserManager<ApplicationUser> UserManager
@using Newtonsoft.Json
@{
    string data = JsonConvert.SerializeObject(Model);
}
@section scripts{
    <script src="~/js/knockout-3.4.2.js"></script>
    <script src="~/js/knockout.mapping-latest.js"></script>
    <script src="~/js/createobservationviewmodel.js"></script>
    <script type="text/javascript">
        var createObservationViewModel = new CreateObservationViewModel(@Html.Raw(data));
        createObservationViewModel.Observation.LocationLatitude = @UserManager.GetUserAsync(User).Result.DefaultLocationLatitude
            createObservationViewModel.Observation.LocationLongitude = @UserManager.GetUserAsync(User).Result.DefaultLocationLongitude
            ko.applyBindings(createObservationViewModel);
            $(select).selectpicker('render');
    </script>
}
<h2>Create an observation</h2>
<form>
    <div class="form-group">
        @* change to Partial View like Manage Index *@
        <span class="control-label" name="MessageToClient" data-bind="text: MessageToClient" />
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="Observation.ObservationId">Id:</label>
        <div class="col-sm-10">
            <span class="form-control" name="Obervation.ObservationId" data-bind="text: Observation.ObservationId@*, event: {change: flagSalesOrderAsEdited}*@" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="Observation.ObservationId">Date:</label>
        <div class="col-sm-10">
            <input class="form-control" data-bind="datePicker : Observation.ObservationDateTime" type="date" />
        </div>
    </div>
    <div class="form-group">
        <input class="form-control" name="Observation.LocationLatitude" data-bind="value: Observation.LocationLatitude" />
        <input class="form-control" name="Observation.LocationLongitude" data-bind="value: Observation.LocationLongitude" />
    </div>
    <div class="form-group" spellcheck="true">
        <label class="col-sm-2 control-label" for="Observation.Note">Note:</label>
        <div class="col-sm-10">
            <input class="form-control" name="Observation.Note" data-bind="value: Observation.Note" />
        </div>
    </div>

    <hr />
    <hr />

    <table class="table table-striped">
        <tr>
            <th class="text-right">Quantity</th>
            <th class="text-right">Bird</th>
            <th><button class="btn btn-info btn-xs" data-bind="click: addObservedSpecies">Add</button></th>
        </tr>
        <tbody data-bind="foreach: ObservedSpecies">
            <tr>
                <td class="form-group"><input name="ObservedSpecies.Quantity" class="form-control input-sm text-right" data-bind="@*attr: {'id': 'Quantity_' + $index()},*@ value: Quantity@*, event: {change: flagSalesOrderItemAsEdited}*@" /></td>
                <td class="form-group">
                    @Html.DropDownListFor(m => m.Observation.BirdId,
                        new SelectList(Model.Birds, "BirdId", "EnglishName"),
                        new
                        {
                        @class = "form-control selectpicker show-tick",
                        data_bind = "value: BirdId",
                        title = "Choose a bird",
                        data_live_search = "true",
                        data_show_subtext = "true"
                        })
                </td>
                <td class="form-group">delete</td>               
            </tr>
        </tbody>
    </table>
</form>

任何人都可以提供有关如何呈现每个选择标记的任何帮助吗？

更新

如果我删除了bootstrap select，将其保留为普通选择列表，一切都按预期工作。因此，只需要使Bootstrap选择选择器正确呈现即可。

更新2：

添加另一行的代码是淘汰模型：

CreateObservationViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, observedSpeciesMapping, self);

self.addObservedSpecies = function () {
    var observedSpecies = new ObservedSpeciesViewModel({ Id: 0, BirdId: 0, Quantity: 1 });
    self.ObservedSpecies.push(observedSpecies);
}

Answer 1

每当knockout动态添加新的select元素时，要调用selectpicker函数，你需要使用自定义绑定。最简单的情况可能如下所示：

ko.bindingHandlers.selectPicker = {
    init: function (element, valueAccessor, allBindings) {
        $(element).selectpicker('render');
    }
}

将它添加到你的razor droplist参数中。它不需要有意义的值，因为它没有对数据做任何事情。

data_bind = "selectPicker: {}, value: BirdId",

动态添加/渲染Bootstrap选择

1 个答案: