0

我不知道如何将元素副本、嵌入代码和 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);    
      },
4

2 回答 2

2

你有两个专业的选择。如果您有其他可能删除子元素的东西（如另一个视图），您可以检查 DOM 的状态是否良好，或者您可以为视图设置一个标志，该标志效率高很多倍（但更难管理）。

检查 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 */
  }
}
于 2013-11-06T08:44:42.753 回答
0

尝试这个，

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);    
              },
于 2013-11-06T07:17:59.303 回答