未捕获的错误：您不能将绑定多次应用于同一元素

Question

我如何将我为两个不同目的而保留的两个模型结合起来。一种是用于文件上传，另一种是用于渲染来自不同对象的数据。下面是我尝试过的各自的html和JS。

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>

绑定数据的Javascript部分

     var dataset;
     var docsModel;
     var docsTable;
     var vasTypes;
     $(function(){
       var viewModel = {};
       viewModel.fileData = ko.observable({
         dataURL: ko.observable(),
         // base64String: ko.observable(),
       });
       viewModel.onClear = function(fileData){
         if(confirm('Are you sure?')){
           fileData.clear && fileData.clear();
         }                            
       };
       viewModel.debug = function(){
         window.viewModel = viewModel;
         //console.log(ko.toJSON(viewModel));
     fileUpload(viewModel);
         debugger; 
       };
       ko.applyBindings(viewModel);
     });

     $(document).ready(function(){
        docsModel = new $.cordys.model({
              context: document.getElementById("addPanelForm"),
              objectName: "CONTRACT_DOCUMENT",

              fields: ["CONTRACT_DOCUMENT_ID" , "CONTRACT_ID" , "DOCUMENT_NAME" , "FILE_PATH" , "COMMENTS"],
              defaults: {
                 namespace: "http://services.vw.com/lpms/1.0/wsapp"
              },/*
              update: {
                 method: "UpdatePlanVas"
              },*/
              read: {
                 method: "GetContractDocumentObjectsForContractId",
                 parameters: {
                         CONTRACT_ID: "CONTRACT_1000"                           
                         },
              }
        });      

        GetContractDocumentObjectsForContractId();

        docsTable = $('#docsDataTable').DataTable({
           data: dataset,
           columnDefs: [ {
              orderable: false,
              className: 'select-checkbox',
              defaultContent: "",
              targets: 0},
           { data: "CONTRACT_DOCUMENT_ID",
              targets: 1,
              visible: false},
           { data: "CONTRACT_ID",
              targets: 2},

           { data: "DOCUMENT_NAME",
              targets: 3},
                { data: "COMMENTS",
              targets: 5},
           { data: "FILE_PATH",
              targets: 4}],
           select: {
              style:    'multi',
              selector: 'td:first-child'
           },

           order: [[ 1, 'asc' ]],
           "searching": false,
           "lengthChange": false
        });
     });



     function fileUpload(data){
     dataObject=ko.toJS(viewModel);
     fileName=dataObject.fileData.file.name;
     fileContent=dataObject.fileData.dataURL.split(',')[1];
           $.cordys.ajax({
               method: "WriteFile",
     parameters: {
     filename: fileName,
     encoded: "true",
     data:fileContent
     },
               namespace:"http://schemas.cordys.com/1.0/ac/FileConnector",
               dataType: "* json",
               async: false,
               success: function(e){
     $.notify("Yeah ! File Uploaded", "success");

               }
            });
        }

Answer 1

你得到了错误

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

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

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

此时，我通常会从 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，并像这样引用 observables

<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 和视图，同时提供一种简单的方法，将多个视图模型的功能数据绑定到单个视图模型中。

从技术上讲，通过在原型级别进行一些引用来获得类似的结果是可能的，但这可能会很快导致复杂化，唯一的好处是让您不必输入属性名称。