javascript - 仅附加元素一次

Question

我不知道如何将元素副本、嵌入代码和 iframe 仅附加一次到容器 #link-options-dropdown。

我的问题是，当我单击 .share-widget 时，我一次又一次地附加所有元素，我希望这些元素仅附加一次。

 events: {
    'click .share-widget': 'showEmbededCode',
  },


showEmbededCode: function(e) {
        var emebededCode = '<div class="inframe-container"></div>';
        var widgetKey = $(e.currentTarget).attr("data-widgetKey");
        var iframe = '<iframe src="'+widgetKey+'/widget" width="100%" height="100%" frameborder="0"></iframe>';
        var copy = '<p class="copy-widget">Copy and paste the code below to your blog or website. If needed adjust the width or/and height (f.e. width="400px"): </p>';
          $('#link-options-dropdown').append(copy);
          $('#link-options-dropdown').append(emebededCode);
          $('.inframe-container').text(iframe);    
      },

Answer 1

你有两个主要的选择来解决这个问题。你可以检查 DOM 的状态，如果你有其他可能删除子元素的东西(比如另一个 View )，这很好，或者你可以为 View 设置一个标志，它的效率要高很多倍(但更难管理) )。

用于检查 DOM:

events: {
  'click .share-widget': 'showEmbededCode'
},
showEmbededCode: function(e){
  /* Check to see if the copy-widget already exists as a child */
  if($("#link-options-dropdown .copy-widget").length===0){
    var emebededCode = '<div class="inframe-container"></div>';
    var widgetKey = $(e.currentTarget).attr("data-widgetKey");
    var iframe = '<iframe src="'+widgetKey+'/widget" width="100%" height="100%" frameborder="0"></iframe>';
    var copy = '<p class="copy-widget">Copy and paste the code below to your blog or website. If needed adjust the width or/and height (f.e. width="400px"): </p>';
    $('#link-options-dropdown').append(copy);
    $('#link-options-dropdown').append(emebededCode);
    $('.inframe-container').text(iframe);  
  }
}

设置标志:

initialize: function(){
  ...
  _.bindAll(this, "showEmbededCode");/* Makes sure `this` refers to View (Part of Underscore) */
},
events: {
  'click .share-widget': 'showEmbededCode'
},
embededCodeDrawn: false,
showEmbededCode: function(e){
  /* Check to see if the flag is set */
  if(this.embededCodeDrawn){
    var emebededCode = '<div class="inframe-container"></div>';
    var widgetKey = $(e.currentTarget).attr("data-widgetKey");
    var iframe = '<iframe src="'+widgetKey+'/widget" width="100%" height="100%" frameborder="0"></iframe>';
    var copy = '<p class="copy-widget">Copy and paste the code below to your blog or website. If needed adjust the width or/and height (f.e. width="400px"): </p>';
    $('#link-options-dropdown').append(copy);
    $('#link-options-dropdown').append(emebededCode);
    $('.inframe-container').text(iframe);
    this.embededCodeDrawn = true; /* Make sure it isn't drawn again */
  }
}