html - 在主干中插入静态菜单

Question

我必须插入一个用 html 硬编码的简单菜单，但我不知道应该在哪里插入它。我应该直接在路由器中添加html代码吗？如何？

Answer 1

不，您不应该为此使用路由器，您应该在 Backbone.View 对象中执行此操作，该对象应该创建 HTML 并添加它。

没有模板的更简单的方法

 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

您应该使用 Backbone 视图，并让路由器渲染它：

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();​