html - バックボーンに静的メニューを挿入

Question

HTML にハードコードされた簡単なメニューを挿入する必要がありますが、どこに挿入すればよいかわかりません。html コードをルーターに直接追加する必要がありますか? そしてどうやって？

Answer 1

いいえ、そのためにルーターを使用するべきではありません。HTMLを作成して追加する必要がある種類のオブジェクトであるBackbone.Viewオブジェクトで使用する必要があります。

テンプレートなしのより簡単な方法

 var view = Backbone.View.extend({
   .
   .   other backbone stuff
   .

   ,menu: '<div> menu </div>'

   ,render: function(){
      var compiledHTML= $(this.menu);
      $('selector').append(compiledHTML);
   }

 });

テンプレートを使用したより簡単な方法

ページに挿入されたHTMLメニューを使用するHTMLを使用する

。。あなたのhtmlコード。

 .
 . end of your html code
 .

<script type="text/template" id="marker_small_info_template">
   <div> xxx </div>
</script>

</body> 

次に、BackboneでJqueryを使用してラップし、ページの目的の場所に追加します。

 var view = Backbone.View.extend({

    ,render: function(){
      var compiledHTML= _.template( $("#marker_small_info_template").html());
      $('selector').append(compiledHTML);
      return this;
   }

 });

それを行うための複雑で派手な方法（require.js +テンプレート）

そのHTMLコードをテンプレート（たとえばUnderscore.template）として別のファイルに入れ、Require.JSを使用してBackbone.Viewで「コンパイル」し、JQueryを使用してラップして追加します。

define([  
  'text!templates/menuFrenteItem.html'
],
function (templateMenuItem) {

   return Backbone.View.extend({
  .
  .
  .
  ,smallInfo: function(variables){ return _.template(templateMenuItem, variables)}

  ,render: function(){
     var compiledHTML = $(this.smallInfo(dataToCompileTemplate));
     $('selector').append(compiledHTML);
     return this;
  }

}

これは、Javascriptでテンプレートを使用する方法を学び、このツールをベルトに追加する良い機会だと思います。

Answer 2

You should use a Backbone view, and have the router render it:

http://jsfiddle.net/rd13/g3U7j/11/

var MyView = Backbone.View.extend({
    el: '.container',
    template: "<menu><li>Item</li></menu>",
    render: function() {
        this.el.innerHTML = this.template;
        return this;
    }
});

var r = Backbone.Router.extend({
    routes: {
        '': 'default'
    },
    default: function() {
        new MyView().render();
    }                
});

var router = new r();
Backbone.history.start();​