使用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的内容。所以试着用＆＃34;客户＆＃34;来思考和＆＃34;服务器＆＃34;而不是backbone和Cake。

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

JavaScript客户端可以通过浏览器和事件之间来扩展浏览器功能 - 也就是说，通过告诉浏览器，＆＃34;我将处理此事件，而不是您。＆＃34;

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

• window.onhashchange：所有浏览器都支持此功能，只要＆＃34; hash＆＃34;部分网址更改;例如，如果单击锚链接<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，但是当我们调用{时，！NOT！ {1}}或history.pushState。这是一个很好的行为和设计。

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

最后，请确保**您正在用history.replaceState包裹的JavaScript中设置所有内容。现在你不是。