我有一个问题,在与DOM元素绑定方面可以提供一些帮助。
在将这些数据用于Tribute @mentions元素的“值”数组中之前,我必须调用Web服务来获取一些数据。我有一个Tribute对象的集合,因为每个DOM元素都有一组不同的数据绑定到它,这意味着在Tribute元素所连接的每个可编辑div上都可以出现不同的标签。与UI进行交互时,需要从Web服务中提取更多数据,在集合中创建并存储一个新的Tribute对象,然后将其绑定到动态创建并显示在屏幕上的新DOM元素(无需重新加载页)。
我的问题是,我编写的例程试图重新绑定已经绑定的Tribute元素。调用InitializeTributeForPage()时出现错误(如下所示)。错误是“致敬已绑定到DIV”。我理解为什么收到此警告,并且正在寻找一种方法,如果已经绑定,则不要尝试绑定到现有元素。我知道有一些方法可以解决此问题(例如,仅重新加载页面,或每个存储布尔标记以声明其是否已绑定的对象),但我真的很想知道是否存在查看DOM元素是否已经绑定到某物以及它绑定到什么的方法。我的代码如下:
以下是初始化每个贡品实例的例程:
//call webservice and put all data in $scope.allPersonalDevelopments array
function initialiseTributeForPage() {
//to clear existing tributes so that all can be recreated - including any new ones that have been pushed into the $scope.allPersonalDevelopments array
$scope.allTributeInstancesOnPage.length = 0;
var tributeInternal;
angular.forEach($scope.allPersonalDevelopments,function (value) {
if (value.PersDevTaggedUsers != null && value.StatusId != 2) {
$scope.valuesArrayForEachTribute = [];
angular.forEach(value.PersDevTaggedUsers,function (internalValue) {
$scope.valuesArrayForEachTribute.push(
{
key: internalValue.FullName,value: internalValue.FullName,EncryptedUserId: internalValue.EncryptedUserId
});
});
tributeInternal = new Tribute({
values: $scope.valuesArrayForEachTribute,trigger: '@',positionmenu: true,selectTemplate: function (item) {
var outPut = item.original.value.replace(' ','');
return (
'<span id="' + item.original.EncryptedUserId + '" contenteditable="false"><strong> @' +
outPut + '</strong></span>'
);
},menuItemTemplate: function (item) {
return '@' + item.original.value.replace(' ','') + ' <br /> <div style="font-size:
0.8em;"> (' + item.original.value + ') </div>';
}
});
//this makes sure the element is on the DOM before this is attached,as initialise tribute is called from multipel places,some when the screen hasn't been fully initialised - i.e. awaiting the success callback function acknowledgement from the web service
attachTributeToDivUsingId(tributeInternal,'progressEditableDivPersDevId' +
value.PersonalDevelopmentId);
//add the tribute instance to the store
$scope.allTributeInstancesOnPage.push(tributeInternal);
}
});
}
这是用于在回调事件将贡品实例附加到DOM元素之前测试DOM元素是否已呈现的方式。我想在这里测试它是否已经绑定(请参阅评论):
function attachTributeToDivUsingId(tributePassedIn,idOfEditableRegion) {
//here is where I would like to test to see if the DOM element is already attached to a tribute instance,of find a marker where I can look into the elements that are bound to the DOM element using a jQuery id selector
if (!$("#" + idOfEditableRegion).height()) {
window.requestAnimationFrame(function () {
attachTributeToDivUsingId(tributePassedIn,idOfEditableRegion)
});
}
else {
tributePassedIn.attach(document.getElementById(idOfEditableRegion));
}
return tributePassedIn;
};
我正在开发一个使用Angular的程序(我不像Vue或React那样熟悉)。我真的希望获得一些有关如何确定具有特定ID的DOM元素是否绑定到其他东西的信息。有任何想法吗?
非常感谢