使用木偶处理锚标记点击

Question

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

我想在单击锚按钮时将我的页面从 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
}

我无法从锚标记中检索您在答案中指定的该 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 路由它们的链接点击。

Answer 2

我已经实现了一个behavior 来使用v-href 属性自动处理这个问题

https://github.com/samccone/marionette-behaviors#viewlinks

我在我的所有应用程序中都广泛使用它，它就像一个魅力！