Javascript DOM绑定或使用Tribute @Mentions系统重新绑定

我有一个问题,在与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元素是否绑定到其他东西的信息。有任何想法吗?

非常感谢

JJ13404145553 回答:Javascript DOM绑定或使用Tribute @Mentions系统重新绑定

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2891098.html

大家都在问