使用 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 backbone js 的经验。我也想在 CRUD cakephp 上使用它。

Answer 1

友情提示：CakePHP是一个服务器端库，负责发送HTML或一些序列化数据（JSON, XML, 二进制等) 到您的浏览器。

backbone.js 是一个客户端 库，它为客户端内容和事件处理提供构建块。 CakePHP 和 backbone.js 之间的唯一关系是 CakePHP 可能负责交付客户需要的任何脚本和资产。关于 backbone.js，您可能无法了解任何特定于 CakePHP 的内容。因此，请尝试根据“客户端”和“服务器”而不是 backbone 和 Cake.

来思考

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

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

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

• window.onhashchange：所有浏览器都支持它，只要 URL 的“散列”部分发生变化，它就会被调用；例如，如果您单击锚点 link <a href="#somewhere">Go somewhere</a>，事件将触发并调用侦听器。如果侦听器 returns 不是 true 则浏览器将不会像往常一样处理事件，否则，您的浏览器 URL 将更改为 /path/to/page#somewhere
• history.pushState and window.onpopstate：这是 HTML5 中的一项新功能，因此旧版浏览器不支持它，但目前它已得到相当广泛的采用和使用。基本上，这是一个强大的 API，它为客户端开发人员提供了一种操作和重写浏览器导航历史记录的方法 - 不仅仅是 URL 的 hash 部分，整个事情 - 使用语法（参见 link）类似于 history.pushState(undefined, undefined, 'not/a/real/path');。相应地，有一个事件处理程序 window.onpopstate 会在浏览器在历史链 中向前或向后移动时调用 ，但 !NOT! 当我们调用 history.pushState 或 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() { ... }); 中。现在你不是。