Question

我遇到了一个问题，我想在端点上调用GET，并根据结果，渲染模态或跟踪链接。

目前，当我收到click事件时，我会禁用锚标记的默认行为（在检查结果之前我不想重定向。）。
我在端点上执行GET，如果其中一个返回参数为true，则从回调中抛出一个事件。这个事件有一个听众将触发渲染并显示模态。

这种方法的问题是：GET回调不允许我重定向到链接，除非我禁用弹出窗口拦截器，我想要我的用户可以获得良好的用户体验。

我正在讨论轮询策略（非性能，并不总是准确）或让click事件打开一个跟随锚标签的窗口或渲染模态。

非常感谢任何其他想法或建议。谢谢！

模板定义如下：

var template = _.template('\
  <a href="<%-linkUrl%>?fromHome=true" draggable="false" data-type="app-button" data-se="app-button" target="_blank" \
    class="app-button">\
    <img draggable="false" src="<%-logoUrl%>" class="logo">\
    <span data-action="show-settings" class="icon-button <%-showIcon%>">\
      <span class="icon icon-settings-dark"></span>\
    </span>\
  </a>\
<p class="app-button-name" data-se="app-button-name"><%-label%></p>\
');

事件定义如下：

events: function () {
  var events = {};
  events['click [data-type=app-button]'] = '_firstLoginSettings';

  return events;
},

现在这里调用函数本身。

_firstLoginSettings: function (e) {
  if (this.model.get('__notVerified__')) {
    this.state.trigger(Events.SHOW_CONFIRMATION, this.model);
  } else {
    e.preventDefault();
    e.stopPropagation();
    this.state.trigger(Events.CHECK_VPN_DIALOG, this.model);
  }
},

我的主路由器上有一个监听器。

  this.listenTo(this.state, Events.CHECK_VPN_DIALOG, this._checkVpnDialog);

这是路由器代码的其余部分：

_checkVpnDialog: function (appLink, appLinkSettings) {
  var self = this;
  var vpnSettings = new VpnSettings({
    appLink: appLink,
    '__appInstanceId__' : appLink.get('__appInstanceId__')
  });
  vpnSettings.fetch({}).done(_.bind(function(vpnSettings) {
    if (vpnSettings.checkVpn) {
      self.state.trigger(Events.SHOW_VPN_DIALOG, appLink);
    } else {
      appLink._firstLoginSettings();
      //This doesn't work because it's not associated with a user action, so it won't let me open this window.  This isn't part of the click event loop any more.
      var linkUrlTemplate = _.template('<%-linkUrl%>?fromHome=true');
      window.open(linkUrlTemplate({linkUrl: appLink.get('__linkUrl__')}));
    }

  }));
},

_showVpnDialog: function (appLink, appLinkSettings) {
  this.credsDialog && this.credsDialog.remove();
  if (!appLinkSettings) {
    appLinkSettings = new AppLinkSettings({
      id: appLink.get('id'),
      '__tab__': appLink.get('__tab__')
    });
    appLinkSettings.fetch().done(_.bind(this._renderVpnDialog, this, appLink, appLinkSettings));
  } else {
    this._renderVpnDialog(appLink, appLinkSettings);
  }
},

_renderVpnDialog: function (appLink, appLinkSettings) {
  if (appLink.get('__needsVpn__')) {
    this.vpnDialog = new VpnDialog({
      model: appLink,
      appLink: appLink,
      settings: this.settings,
      state: this.state
    });
    this.vpnDialog.render();
  }
},

Answer 1

所以我做的是用点击打开一个新窗口，然后更改窗口的位置，以便它可以转到新位置或关闭自己。一种hacky解决方案，但它的工作原理！

Backbone Event触发Popup被阻止。

1 个答案: