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 + templates）

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

在骨干中插入静态菜单

2 个答案: