Knockout.js 动态添加/呈现引导选择

我正在使用创建一个动态表单。我有一个表，用户可以通过单击按钮向表中添加新行。My显示在第一行中，但不显示在通过单击按钮添加的新行中。以下是一个屏幕截图：

我的研究表明，当动态添加引导选择时（在本例中就是这样），每次都需要渲染它。可以这样渲染：

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

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

@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>

---

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

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

将其添加到您的razor droplist参数中。它不需要有意义的值，因为它对数据没有任何作用

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

---

你能展示你的添加按钮的代码吗？嗨@JasonSpake，我已经用我的淘汰脚本中的相关代码更新了我的帖子。如果你需要看完整的剧本，请告诉我：）太棒了，@JasonSpake。它工作得很好：）

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