Question

我不知道如何将元素copy，embeded code和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），或者您可以为视图设置一个效率高出许多倍的标记（但更难管理））。

检查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 */
  }
}

Answer 2

试试这个，

showEmbededCode: function(e) {
    $('#link-options-dropdown').html('');
                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);    
              },

只附加一次元素

2 个答案: