使用 BACKBONE JS 路由 Cakephp

Question

<script>
    var HomeView = Backbone.View.extend({
          template: '<h1>Home</h1>',
          initialize: function () {
              this.render();
          },
          render: function () {
              this.$el.html(this.template);
          }
      });
    var AboutView = Backbone.View.extend({
          template: '<h1>About</h1>',
          initialize: function () {
              this.render();
          },
          render: function () {
              this.$el.html(this.template);
          }
      });

      var AppRouter = Backbone.Router.extend({
          routes: {          
              '': 'homeRoute',
              'home': 'homeRoute',
              'about': 'aboutRoute',          
          },
          homeRoute: function () {
              var homeView = new HomeView();          
              $(".content").html(homeView.el);
          },
          aboutRoute: function () {
              var aboutView = new AboutView();          
              $(".content").html(aboutView.el);
          }
      });

      var appRouter = new AppRouter();
      Backbone.history.start();
    </script>
    <ul>
        <li><?php echo $this->Html->link('Home',array('controller' =>'pages','action' => 'home')); ?></li>
        <li><?php echo $this->Html->link('About',array('controller' =>'pages','action' => 'about')); ?></li>
    </ul> 

    How to convert the code above to make backbone.js like this in manual coding I seen in the NET.
    <div id="navigation">
        <a href="#/home">Home</a>
        <a href="#/about">About</a> 
    </div>   
    <div class="content">
    </div>

我只是这个人的新手，请帮助我。我现在正在阅读 Backbone js，任何人都可以帮助我解决这个问题。如果你有使用 cakephp 主干 js 的经验。我也想在 CRUD cakephp 上使用它。

Answer 1

友情提醒：CakePHP 是一个服务器端库，其职责是将 HTML 或一些序列化数据（JSON、XML、二进制等）发送到您的浏览器。

backbone.js 是一个客户端库，为客户端内容和事件处理提供构建块。 CakePHP 和 backbone.js 之间的唯一关系是 CakePHP 可能负责交付客户需要的任何脚本和资产。对于backbone.js，您可能无法了解特定于CakePHP 的任何信息。所以试着从“客户端”和“服务器”的角度来思考，而不是backbone 和Cake。

现在，几乎每个网站都会有一些链接。当用户点击一个链接时，浏览器会将其视为一个事件并做出相应的响应。

JavaScript 客户端可以通过进入浏览器和事件之间来扩展浏览器功能 - 也就是说，通过告诉浏览器，“我将处理这个事件，而不是你。”

在backbone.js 中，Backbone.history.start method 告诉浏览器退出并让backbone 处理某些事件：

• window.onhashchange：所有浏览器都支持，只要 URL 的“hash”部分发生变化就会被调用；例如，如果您单击锚链接<a href="#somewhere">Go somewhere</a>，该事件将触发并调用侦听器。如果侦听器返回 true 以外的其他内容，则浏览器将不会像往常一样处理该事件，否则，您的浏览器 URL 将更改为 /path/to/page#somewhere
• history.pushState and window.onpopstate：这是 HTML5 中的一项新功能，因此旧浏览器不支持它，但在这一点上，它已被广泛采用和使用。基本上，这是一个强大的 API，它为客户端开发人员提供了一种操作和重写浏览器导航历史的方法——不仅仅是 URL 的 hash 部分，而是整个事情——使用像 history.pushState(undefined, undefined, 'not/a/real/path'); 这样的语法（见链接）。相应地，有一个事件处理程序 window.onpopstate 将在浏览器 在历史链中向前或向后移动 时调用，但当我们调用 history.pushState 时 !NOT!或history.replaceState。这是一种良好的行为和设计。

You need to decide what you want to use - hash-style URLs and/or "real" URLs - and then configure Backbone.history.start arguments accordingly。你可以同时使用，但我不推荐它。

最后，请确保 **您在 JavaScript 中设置了所有内容，包裹在 $(document).ready(function() { ... }); 中。现在你不是。