未捕获的错误：您不能将绑定多次应用于同一元素
Posted
技术标签:
【中文标题】未捕获的错误：您不能将绑定多次应用于同一元素【英文标题】：Uncaught Error: You cannot apply bindings multiple times to the same element 【发布时间】：2016-10-13 09:28:30 【问题描述】：我如何将我为两个不同目的而保留的两个模型结合起来。一种是用于文件上传，另一种是用于渲染来自不同对象的数据。下面是我尝试过的各自的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" >
<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" \>×</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" \>×</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");
);
【问题讨论】：
如果您通过特别注意格式（编辑器上有一个预览）让我们更容易阅读您的代码，这会有所帮助，如果您重新制作您的情况尽可能合理（帖子中有很多似乎与问题无关的代码）。目前，这个问题还不清楚（虽然我怀疑如果它是清楚的，它可能是this one的重复）。 【参考方案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 和视图，同时提供一种简单的方法，将多个视图模型的功能数据绑定到单个视图模型中。
从技术上讲，通过在原型级别进行一些引用来获得类似的结果是可能的，但这可能会很快导致复杂化，唯一的好处是让您不必输入属性名称。
【讨论】：
以上是关于未捕获的错误：您不能将绑定多次应用于同一元素的主要内容，如果未能解决你的问题，请参考以下文章
CKEDITOR - 未捕获的错误：元素不支持指定的元素模式：“元”
未捕获的错误：输入是一个空元素标签，既不能有`children`也不能使用`dangerouslySetInnerHTML`