2014-09-29 99 views
0

嗨,所以我必须在骨干网与此类似骨干视图触发事件委托多次

app.FileListItemView = Backbone.View.extend({ 
    tagName: 'li', 
    className: 'list-group-item clearfix', 
    events: { 
     'click .download-action': 'download' 
    }, 
    template: _.template(
      "<div class='pull-left' style='width: 80%'>\n\ 
       <%= name %><br><span style='font-size: 10px;'><%= path %></span>\n\ 
      </div>\n\ 
      <div class='pull-right' style='width: 20%'>\n\ 
       <div class='dropdown'>\n\ 
        <button class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown'>\n\ 
         Actions\n\ 
         <span class='caret'></span>\n\ 
        </button>\n\ 
        <ul class='dropdown-menu' role='menu'>\n\ 
         <li class='download-action' data-id='<%= id %>' data-accountid='<%= accountid %>' role='presentation'><a class='super-anchor' role='menuitem' tabindex='-1' href='#'>Download</a></li>\n\ 
        </ul>\n\ 
       </div>\n\ 
      </div>" 
      ), 
    initialize: function() { 
    }, 
    render: function() { 
     this.$el.html(this.template(this.model)); 
     return this; 
    }, 
    download: function (event) { 
     //console.log(this.$el.find('.download-action-link').data('id')); 
     var el = this.$el.find('.download-action'); 
     var id = el.data('id'); 
     var accountid = el.data('accountid'); 
     var url = app.config.get('apiURL'); 
     var apiKey = app.config.get('apiKey'); 

     console.log(el.prop('tagName')); 

     $.ajax(url + '/accounts/' + accountid + '/links', { 
      data: { 
       'file_id': id, 'direct': true 
      }, 
      headers: { 
       Authorization: 'ApiKey ' + apiKey 
      }, 
      type: 'POST', 
      success: function (data) { 
       if (data.active) { 
        var a = el.find('.super-anchor'); 
        console.log(a); 
        //change this part 
        //a.attr('href', data.url).trigger('click'); 
        //to this 
        a.attr('href', data.url).on('click', function(event){ 
         event.preventDefault(); 
         event.stopPropagation(); 
        })[0].click(); 
       } 
      } 
     }); 
    } 
}); 

的想法看法是,当我点击LI与“下载行动”类的下载方法在我看来,应该从ajax调用中选择一个url,然后将其添加到LI下的anchot标签的href attr,然后触发锚点,但是当我这样做时,下载方法开始是无限期地调用循环,可以告诉我为什么会发生这种情况?谢谢!!!!

+0

您应该考虑将模板移动到DOM。 – 2014-09-29 23:47:40

回答

1

我假设触发的点击事件正在传播到li.dow​​nload-action,然后再次启动ajax下载功能。解决方案是使用window.location.href将用户导航到新的url或将该链接移出边li.dow​​nload-action。

+0

嘿,你指向我正确的方向,但是解决方案有点不同,基本上我添加了一个事件处理程序到锚标记本身来停止传播,所有工作都按预期工作,谢谢! – goseta 2014-09-29 23:54:50

+0

啊啊不错不错! – zmehboob 2014-09-30 16:27:03