Question

我搜遍了整个地方无济于事。每个人似乎都有自己的方式来构建一些带有主干的待办事项清单。我需要做一些不同的事情，尽管更粗糙。我需要在骨干网上建立一个四页的网站 - 我知道我可以用jQuery或同等的方法轻松地做到这一点，但这可能会在未来的范围内增加。所以我真的不使用模型或集合，只是路由，视图和模板。我的模板数量非常少，我不需要从外部文件夹中获取它们我可以换掉div并让模板实时内联。

以最简单的形式，我有一个单页面的网络应用程序，我需要用一个按钮，一个方向，一个开始和结束交换4个静态视图。而已。我找到的任何教程或文档都没有使用骨干执行此基础知识。任何精明的人都在关心我指向正确的方向吗？

Answer 1

这是一个简单的小页面应用程序，当您按下按钮时，可以从第1页到第4页交换4个不同的模板和步骤。如果您有疑问，请告诉我。

<html>
  <head>
    <title>Steps</title>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
    <script type="text/x-template" id="page-1">
      <p>Page one content</p>
    </script>
    <script type="text/x-template" id="page-2">
      <p>Page two content</p>
    </script>
    <script type="text/x-template" id="page-3">
      <p>Page three content</p>
    </script>
    <script type="text/x-template" id="page-4">
      <p>Page four content</p>
    </script>
    <script>
      (function($){
        // Helper to get template text.
        function getTemplate(index){
          return $('#page-' + index).text();
        }

        // Simple view to render a template, and add a button that
        // will navigate to the next page when clicked.
        var PageView = Backbone.View.extend({
          index_: null,

          events: {
            'click button': 'nextPage_'
          },

          initialize: function(options){
            this.index_ = options.index;
          },

          render: function(){
            var html = getTemplate(this.index_);

            // If there is a next page, add a button to proceed.
            if (html && getTemplate(this.index_ + 1)){
              html += '<button>Next</button>';
            }
            this.$el.html(html);
          },

          nextPage_: function(){
            router.navigate('page/' + (this.index_ + 1), {trigger: true});
          }
        });

        // Router handling a default page, and the page urls.
        var Router = Backbone.Router.extend({
          routes: {
            'page/:index':  'loadPage',
            '*notFound': 'defaultPage'
          },
          defaultPage: function(){
            this.loadPage();
          },
          loadPage: function(index){
            // Default to page 1 when no page is given.
            index = parseInt(index, 10) || 1;

            if (this.pageView_) this.pageView_.remove();
            this.pageView_ = new PageView({index: index});
            this.pageView_.render();

            this.pageView_.$el.appendTo('#content');
          }
        });

        var router;
        $(function(){
          router = new Router();
          Backbone.history.start({pushState: true});
        });
      })(jQuery);
    </script>
  </head>
  <body>
    <!-- Some page header -->
    <section id="content"></section>
  </body>
</html>

使用Backbone进行超级简单的页面导航

1 个答案: