jquery - 使用 Marionette 处理 anchor 标记点击

Question

我想要的是处理我的 Marionette.ItemView 事件 内的 anchor 按钮单击。我不想在 anchor 标记中使用 href。我想处理 itemview 中的点击并要求backbone approuter更改页面。

我想通过点击 anchor 按钮将我的页面从 index 切换到 myaccount。我的模板如下所示

<div>
    <a data-role="button" id="btn_eclipse" class="btn_eclipse_myaccount"><%= val_btn_myaccount %></a>
    <a data-role="button" id="btn_eclipse" class="btn_eclipse_services"><%= val_btn_services %></a>
    <a data-role="button" id="btn_eclipse" class="btn_eclipse_offers"><%= val_btn_offers %></a>
</div>

我的 Marionette.ItemView 捕获这样的事件

events : {
    'click input[type="button"]' : 'onButtonClick',
    'blur input[type="text"]' : 'onKeyPress',
    'click a' : 'onAnchorButtonClick',
},          
onAnchorButtonClick : function(obj){
    obj.preventDefault;
    var btn_id = $(obj.target).attr('id');
    console.log("The button clicked id is==="+$(obj.target).attr('id'));
    //here i trigger event to change page
}

我无法检索您在答案中从 anchor 标记指定的 ID 或任何其他属性，例如 href。

请告诉我该怎么办。

提前致谢。

Answer 1

你可以用这样的东西做你想做的事:

var MyView = Backbone.Marionette.ItemView.extend({
  events : {
    "click a" : "handleRouting"
  },

  handleRouting : function (e) {
    e.preventDefault();
    Backbone.history.navigate(/*whatever your route is*/, true);
  }
});

虽然上面的方法可行，但我建议做的是做你不想做的事情，即在 a 标记上使用 href 并有一个挂接到路由中的全局监听器。

根据您的评论问题，您可以使用如下内容实现全局监听器:

$(document).on("click", "a", function (e) {
  var href = $(this).attr("href");
  if (href && href.match(/^\/.*/) && $(this).attr("target") !== "_blank") {
    e.preventDefault();
    Backbone.history.navigate(href, true);
  }
});

如果您使用的是 HTML 推送 API(而不是 #!s)，那么类似上面的内容将捕获通过您的 Backbone.Router 路由的链接点击。