2

私は無駄にあちこちを検索しました。誰もが何らかの形の todo リストをバックボーンで構築する独自の方法を持っているようです。もっと粗雑ではありますが、少し違うことをする必要があります。バックボーンの上に 4 ページのサイトを構築する必要があります。これは jQuery または同等の機能を使用して簡単に実行できることはわかっていますが、将来的に範囲が拡大される可能性があります。したがって、モデルやコレクションは使用せず、ルート、ビュー、テンプレートのみを使用しています。私のテンプレートの数は非常に少ないので、外部フォルダーから取得する必要はありません。div を交換して、テンプレートをインラインでライブにするだけです。

最も単純な形式では、1 つのボタン、1 つの方向、開始と終了を備えた 4 つの静的ビューを交換する必要がある単一ページの Web アプリがあります。それでおしまい。私が見つけたチュートリアルやドキュメントは、バックボーンでこの基本的なことを実行していません。そこにいる知識豊富な人々は、私を正しい方向に向けようとしていますか?

4

1 に答える 1

3

これは、ボタンを押すと 4 つの異なるテンプレートとページ 1 から 4 を切り替えるシンプルな小さな 1 ページのアプリです。ご不明な点がございましたら、お知らせください。

<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 に答える