Javascript 未捕获错误：不能对同一元素多次应用绑定

我怎样才能把我为两个不同目的保留的两个模型结合起来呢。一个用于文件上传，另一个用于呈现来自不同对象的数据

HTML部分

     <div class="well" data-bind="fileDrag: fileData">
        <div class="form-group row">
           <div class="col-md-6">
              <img style="height: 125px;" class="img-rounded  thumb" data-bind="attr: { src: fileData().dataURL }, visible: fileData().dataURL">
              <div data-bind="ifnot: fileData().dataURL">
                 <label class="drag-label">Drag file here</label>
              </div>
           </div>
           <div class="col-md-6">
              <input type="file" data-bind="fileInput: fileData, customFileInput: {
                 buttonClass: 'btn btn-success',
                 fileNameClass: 'disabled form-control',
                 onClear: onClear,
                 }" accept="application/pdf,image/*">
           </div>
        </div>
     </div>
     <button class="btn btn-default" data-bind="click: debug">Upload</button>
  </div>
  <div id="notification" style="display: none;">
     <span class="dismiss"><a title="dismiss this notification">X</a></span>
  </div>

     <!-- Collapsible Panels - START -->
     <div class="container">
        <div class="row">
           <div class="col-md-12">
              <div class="panel panel-primary">
                 <div class="panel-heading">
                    <h3 class="panel-title">Plan Details</h3>
                 </div>
                 <div class="panel-body">
                    <span class="glyphicon glyphicon-plus clickable" id="addPlanBtn"></span>
                    <span class="glyphicon glyphicon-remove clickable" id="removePlanBtn"></span>
                    <span class="glyphicon glyphicon-edit clickable" id="editPlanBtn"></span>
                    <table id="docsDataTable" class="table table-striped display" width="100%">
                       <thead>
                          <tr>
                              <th></th>
                              <th>Contract Document ID</th>
                              <th>Contract ID</th>
                              <th>Document Name</th>
                              <th>File Path</th>
                              <th>Comments</th>

                          </tr>
                       </thead>
                    </table>                        
                    <div class="modal fade" id="notificationDialog" role="dialog">
                       <div class="modal-dialog modal-sm">
                          <div class="modal-content">
                             <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" \>&times;</button>
                                <h4 class="modal-title">Notification</h4>
                             </div>
                             <div class="modal-body" id="notificationBody">


                             </div>
                             <div class = "modal-footer">
                                <button type = "button" class = "btn btn-primary" data-dismiss = "modal">
                                   Ok
                                </button>
                             </div>
                          </div>
                       </div>
                    </div>
                    <div class="modal fade" id="confirmBox" role="dialog">
                       <div class="modal-dialog modal-sm">
                          <div class="modal-content">
                             <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" \>&times;</button>
                                <h4 class="modal-title">Confirmation</h4>
                             </div>
                             <div class="modal-body" id="confirmBody">
                                   Selected rows will be made inactive.
                             </div>
                             <div class = "modal-footer">
                                <button type = "button" class = "btn btn-default" data-dismiss = "modal" id="confirmNoBtn">
                                   Cancel
                                </button>
                                <button type = "button" class = "btn btn-primary" data-dismiss = "modal" id="confirmYesBtn">
                                   Ok
                                </button>
                             </div>
                          </div>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
     </div>

---

你得到了错误

不能对同一元素多次应用绑定

因为Knockout只允许将一个视图模型绑定到DOM元素

在您的案例中，您需要以某种方式将两个视图模型合并为一个。虽然您可以简单地将属性从一个视图模型添加到另一个视图模型中，也可以使用新名称创建第三个视图模型，以便在其他地方继续使用这些视图模型的原始形式，但我的建议是创建一个新的超级视图模型，并将两个现有视图模型引用为此新视图模型的属性

在这一点上，我通常会根据OP中的代码创建一个示例，但在这种情况下，正如@Jeroen所指出的，很难理解OP中发生了什么。据我所知，其中只有一个视图模型，而您的问题是有两个视图模型。不幸的是，下面的例子非常通用

var ViewModel1 = function() {
    var self = this;
    self.obs1_1 = ko.observable();
    self.obs1_2 = ko.observableArray([]);

    // some initialisation stuff
},
ViewModel2 = function() {
    var self = this;
    self.obs2_1 = ko.observable();
    self.obs2_2 = ko.observableArray([]);

    // some initialisation stuff
},
SuperViewModel = function() {
    var self = this;
    self.vm1 = new ViewModel1();
    self.vm2 = new ViewModel2();

    // some initialisation stuff
};

然后，您将实例化和数据绑定

SuperViewModel

，并像这样引用可观察对象

<input type="text" data-bind="textInput: vm1.obs1_1" />
<div data-bind="foreach: vm1.obs1_2">
    <span data-bind="html: $data"></span>
</div>

或者让打字更容易一点

<!-- ko with: vm1 -->
    <input type="text" data-bind="textInput: obs1_1" />    <!-- this time without "vm1." -->
    <div data-bind="foreach: obs1_2">                      <!-- this time without "vm1." -->
        <span data-bind="html: $data"></span>
    </div>
<!-- /ko -->

现在，您有了一个单一视图模型，

SuperViewModel

，它引用了未更改的现有视图模型。此解决方案允许您保留现有JavaScript和视图，同时提供一种简单的方法，将多个视图模型的功能绑定到单个视图模型中

---

从技术上讲，在原型级别进行一些引用可以获得类似的结果，但这可能会很快导致复杂性，唯一的好处是可以避免您键入属性名称。

如果您特别注意格式设置，让我们更容易阅读您的代码，这会有所帮助（编辑器上有一个预览版），如果你尽可能减少对你的情况的重述也会有所帮助（帖子中有很多代码似乎与问题无关）。目前，这个问题相当不清楚（尽管我怀疑如果它是清楚的，很可能是重复的）。

<!-- ko with: vm1 -->
    <input type="text" data-bind="textInput: obs1_1" />    <!-- this time without "vm1." -->
    <div data-bind="foreach: obs1_2">                      <!-- this time without "vm1." -->
        <span data-bind="html: $data"></span>
    </div>
<!-- /ko -->