2

我找遍了所有地方都无济于事。每个人似乎都有自己的方式来构建某种形式的带有主干的待办事项列表。我需要做一些不同的事情，尽管更粗糙。我需要在主干之上构建一个四页网站——我知道我可以使用 jQuery 或等效工具轻松地做到这一点，但这可能会在未来扩大范围。所以我真的不使用模型或集合，只使用路由、视图和模板。我的模板数量非常少，我不需要从外部文件夹中获取它们，我只需换掉 div 并让模板内联。

在其最简单的形式中，我有一个单页 Web 应用程序，我需要用一个按钮、一个方向、一个开始和结束来交换 4 个静态视图。就是这样。我发现没有任何教程或文档可以通过骨干实现这种基本功能。那里有任何精明的人愿意为我指明正确的方向吗？

4

1 回答 1

3

这是一个简单的单页小应用程序，当您按下按钮时，它会换出 4 个不同的模板和从第 1 页到第 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>
于 2012-08-18T06:31:20.397 回答