javascript - 在 div 单击 backbone.js 中的 URLS

Question

我已经开始熟悉 backbone.js，需要一点时间来了解路由器、模型和 View 。

通过路由器处理路由并定义它们是小菜一碟，直到该特定路由被定义为 <a href="#some-url"> (我不确定 100%，但我认为 Backbone 正在覆盖默认链接行为，而不是重定向它动态加载保留在当前页面上的模板)。

我需要的是在用户点击 div 元素时执行的 Action 。在 View 下添加事件很容易，点击 div 正确调用该函数。

但从那时起我不确定该怎么做。我可以轻松添加:window.location.href = "#some-url" , 并且浏览器会将页面重定向到请求的 href，但这似乎违反了 Backbone 试图创建的单页规则。

有没有比强制浏览器通过 window.location 更改 href 更合适的方法来处理 View 更改？

编辑:添加了代码。

应用程序.js

require(['jquery', 'backbone', 'app/router'], function ($, Backbone, Router) {
    window.router = new Router();   
    Backbone.history.start();
});

应用程序/router.js

var $           = require('jquery'),
    Backbone    = require('backbone'),
    HomeView    = require('app/views/Home'),
    $body = $('body'),
    homeView = new HomeView({el: $body});
...  
return Backbone.Router.extend({

    routes: {
        "": "home",
        "about": "about"
     },

    home: function () {
        homeView.delegateEvents();
        homeView.render();
    },

    about: function () {
        require(["app/views/About"], function (AboutView) {
            var view = new AboutView({el: $body});
            view.render();
        });
    },

...

应用/路由器/views/home.js

return Backbone.View.extend({

    events: {
      "click #about": "followAbout"
    },
    render: function () {
        this.$el.html(template());
        return this;
    },
    followAbout: function () {
       console.log('about');
       window.router.navigate( "about", { trigger: true } )
    }
});

Answer 1

假设您已经这样定义了您的路由器

 var Workspace = Backbone.Router.extend({
   routes: {
     "help":                 "help",    // #help
     "search/:query":        "search",  // #search/kiwis
     "search/:query/p:page": "search"   // #search/kiwis/p7
   },
   help: function() {
     ...
   },
   search: function(query, page) {
     ...
   }
 });

然后创建一个新的路由器实例

router = new Workspace();
Backbone.history.start();

在您的 div 中，您可以选择在数据属性中定义您的路线，这对您来说很方便

<div id="my_div" data-path="some-url">
  ...
</div>

当用户单击 div 时，您从其数据中获取路线并使用 navigate 函数像这样转到该路线。

$("#my_div").on('click', function(e){
  var path = $(this).attr("data-path");
  router.navigate(path, { trigger: true});
  //this will navigate to the path like a single page app without reloading the page
});

结账 Backbone docs了解更多。

Edit

...
//events inside first view
'click #div-1': 'myFunction'

//myfunction code
myFunction: function(e){
  clicked_div = e.currentTarget;
  path = $(clicked_div).attr('data-path'); //I'm assuming you've stroed the path in your div, or you can get it how ever you like

  window.router.navigate(path, {trigger: true});
  //Also I am assuming you've defined your router under the window object directly, so it can be accessed directly. Or you can always namespace it in an object
  //, to avoid collision
}