删除敲除绑定

Question

我有一个MVC 5应用程序我有3个不同的选项卡 - 他们通过汽车模型上的ajax详细信息加载相同的部分视图，选项卡是柴油/汽油/电动，因此用户可以输入详细信息，如引擎大小3个选项卡，它将保存到数据库中。

我正在使用knockout js调用ajax方法来计算屏幕上的一些总计，并动态地向表单添加内容然后保存到数据库。然而 - 当我在Tabs之间点击时，我得到淘汰赛时抛出一个错误：You cannot apply bindings multiple times to the same element

我页面的部分标记如下：

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

页面的js是：

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

我已经查看了以下question - 我是否无法立即清除屏幕上所有元素的敲除绑定？