Knockout:为许多数据对象绑定模板引导模式

我在Javascript和Knockout JS方面相对较新，我面临以下问题：

我从Ajax请求加载数据，并将其映射到我的对象：

function ActivityModel(obj) {
        if (typeof (obj) != 'undefined') {
            this.ShowTable = ko.observable(true);
            this.Name = ko.observable(obj.nomVessel);
            this.NumRecords = ko.observable(obj.data.length);
            this.DataRecords = ko.observableArray([]);
            var aux = [];
            //When add new items, mark they as changed, so the update css style  will be loaded
            $.each(obj.data, function (index, value) {
                aux.push({ hasChanged: ko.observable(true), record: value });
            });
            this.DataRecords.push(aux);
        }
}

我将所有对象存储到一个名为DataTables的可观察数组中。然后，根据数据，我呈现了一个"小工具"，它由一个带有一些按钮的div和一个加载我的数据记录的表组成：

<!-- ko foreach: DataTables -->
<div class="col-sm-6"> 
    <div class="box gadget">
        <div class="box-header clearfix">
            <a  href="#" class="close-btn" title="Delete Gadget"  data-bind="click: function (data, event) { $root.DeleteGadget(data, event) }"><i class="glyphicon glyphicon-remove"></i></a>
            <a href="#" class="minimize-btn" title="Minimize Gadget"><i class="glyphicon glyphicon-chevron-up"></i></a>
            <h1><strong><span data-bind="text: $data.Name"></span></strong> - Activities</h1>
            <div class="icons pull-right">
                <a href="#modal-configure-gadget" title="Configure Gadget" data-toggle="modal"><i class="glyphicon glyphicon-cog"></i></a>
            </div>
        </div>
        <div class="box-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover text-left density-medium">
                    <thead>
                        <tr>
                            <th>Start Date</th>
                            <th>Start Time</th>
                            <th>End Date</th>
                            <th>End Time</th>
                            <th>Details</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: $data.DataRecords">
                        <tr  class="tooltipstered" data-bind="tooltipster: 'bottom-right'">
                            <td data-bind="text: $data.record.startDate"></td>
                            <td data-bind="text: $data.record.endDate"></td>
                            <td data-bind ="text: $data.record.details"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
          </div>         
    </div>
</div>
<!-- /ko -->

特别是，我有一个按钮可以在每个小工具中打开引导模式：

<div class="icons pull-right">
                <a href="#modal-configure-gadget" title="Configure Gadget" data-toggle="modal"><i class="glyphicon glyphicon-cog"></i></a>
</div>

模式的代码

<div id="modal-configure-gadget" class="modal fade modal-configure-gadget" role="dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header shadow">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <i class="icon-arrow-down-circle"></i><span class="h2">Configure <strong>gadget</strong></span>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal" role="form">
                        <div class="row">
                            <div class="col-sm-6">
                                <span class="h2">Set <strong>size</strong></span>
                                <div class="box box-filter">
                                    <div class="form-group row">
                                        <label for="linhas" class="control-label col-sm-4">Rows:</label>
                                        <div class="add-remove-button col-sm-8">
                                            <span class="btn btn-mini btn-navbar decrease-button">
                                                <i class="glyphicon glyphicon-minus"></i>
                                            </span>
                                            <input id="linhas" type="text" class="form-control" value="1">
                                            <span class="btn btn-mini btn-navbar increase-button">
                                                <i class="glyphicon glyphicon-plus"></i>
                                            </span>
                                        </div>
                                    </div>                              
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer shadow">
                    <button class="btn btn-success">Ok</button>
                    <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
                </div>
            </div>      
        </div>
    </div>

我的问题是：对于每个创建的"小工具"，我都想绑定我显示的按钮来打开模态。此外，模态中的输入"linhas"应该绑定到我的对象的可观察NumRecords。当我尝试使用简单的点击绑定进行绑定时，我出现了一个意外的行为，即我更改了一个对象的输入值（从而更新了一个可观察的NumRecords），并且调用以某种方式广播到屏幕上的其他小工具。我还尝试使用自定义绑定：

ko.bindingHandlers.UpdateActivityCount = {
init:function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    $('#modal-configure-gadget').on('show.bs.modal', function(e) {
        $('#linhasActivity').val(bindingContext.$data.NumActivities());
    });
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    $('#modal-configure-gadget .btn-success').on('click', function(e) {
        var confirm_button = $(e.target).is("#btnConfirmActivitiesChange");
        if (confirm_button === true) {
            //Update Value
            self.UpdateObservableValue(data.NumRecords, $('#linhasActivity'), 'int', data, event);
        }
    });
}
};

但意外的行为依然存在。

我怀疑之所以会发生这种行为，是因为模态的id及其元素与创建的每个小工具都相同（我没有为每个小工具设置一个模态，而是为所有小工具都设置一个模式，这会产生冲突）。然而，我不知道如何生成具有不同id的多个模态（以及按钮和输入等组件的不同id）。我看了一下组件绑定，但没有意识到它是如何工作的，以及它是否有助于解决我的问题。

有人有什么建议吗？

谢谢。