Javascript 移除敲除绑定

我有一个MVC 5应用程序，我有3个不同的选项卡-它们通过ajax详细信息加载相同的汽车模型局部视图，选项卡为柴油机/汽油机/电动，因此用户可以在3个选项卡中输入发动机大小等详细信息，并保存到数据库中

我使用knockout js调用ajax方法来计算屏幕上的一些总数，并动态地将内容添加到表单中，然后保存到db中。然而，当我在选项卡之间单击时，我会被击倒，并抛出一个错误：不能对同一个元素多次应用绑定

我的页面的一些标记如下所示：

<div class="row" data-bind='foreach: ExtraCarInfos'>
                <div class="row">
                    <div class="col-xs-2">
                        <input type="hidden" data-bind="value: Id, attr: {name: 'ExtraCarInfos['+ $index() + '].Id'}"/>
                        <input type="text" data-bind="value: Name, attr: {name: 'ExtraCarInfos['+ $index() + '].Name'}" class = "form-control input-sm" />
                    </div>
                    <div class="col-xs-7">
                        <input type="text" data-bind="value: Description, attr: {name: 'ExtraCarInfos['+ $index() + '].Description'}" class="form-control input-sm" />
                    </div>
                    <div class="col-xs-2">
                        <input type="text" data-bind="value: ExtraValue, attr: {name: 'ExtraCarInfos['+ $index() + '].ExtraValue'}" class="form-control input-sm" data-calculate="true" />
                    </div>
                    <div class="col-xs-1">
                        <a href='#' data-bind='click: removeExtraInfo'>Remove</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12"><a href='#' data-bind='click: addExtraInfo'>Add Extra Info</a></div>
            </div>
            <div class="row">
                    @Html.TextBoxFor(model => model.Value,
                        new
                        {
                            @data_calculate = true
                        })
            </div>
            <div class="row">
                    @Html.TextBoxFor(model => model.Total,
                        new
                        {
                            @disabled = "disabled",
                            @data_bind = "value: Total"
                        })
            </div>

---

我已经看了下面的内容-是否没有办法一次清除屏幕上所有元素的敲除绑定？

我认为预期的方法是首先将视图模型绑定到页面上的DOM元素，请参见下文，然后，通过执行以下操作将视图模型绑定到任何随后加载的元素：ko.applyBindingsviewModel，document.getElementByIdmy-element-id-here；清除绑定不是有意的，这就是为什么这样做更困难。。。大概是因为它使事物处于不正确的状态。@Pricey-因此，如果我在三个选项卡上使用相同的局部视图，那么实现这一点的最佳方法是什么-为每个元素提供一个Id，包括FormName-即Diesel/Petrol，然后在页面的初始加载时对该Id应用绑定，如果页面上有一些数据绑定，那么只对未部分加载的元素应用剔除绑定。然后，当您部分加载选项卡内容时，调用ko.applyBindings。。。就部分加载的内容而言，我认为这些内容不需要不同的名称，只要您有一个ID要绑定。

 var mvcModel = @Html.Raw(Json.Encode(Model))

    var createExtraCarInfo = function (data) {
            if (data) {
                return ko.mapping.fromJS(data);
            } else {
                return {
                    Id: ko.observable(),
                    Name: ko.observable(),
                    Description: ko.observable(),
                    ExtraValue: ko.observable()
                };
            }
        };

        var viewModel = ko.mapping.fromJS(mvcModel, {
            'ExtraCarInfos': {
                create: function(options) { return createExtraCarInfo(options.data); }
            }
        });


        // calculateTotal ajax method removed for Brevity

        var currentTab = fuelType + 'Content ';

        // Add subscription to update totals
        $('#' + currentTab).on('keyup', '[data-calculate]', calculateTotal);

        ko.applyBindings(viewModel);

        removeExtraInfo = function(item) {
            viewModel.ExtraCarInfos.remove(item);
        };

        addExtraInfo = function() {
            viewModel.ExtraCarInfos.push(createExtraCarInfo());
        };