在主干中创建基本导航

Question

我是一个完全没有骨干的菜鸟，并决定尝试创建一个或两个基于骨干作为结构的网页。我的第一个任务是创建一个基本的导航。 我的页面住在这里http://dalydd.com/projects/backbone.html 这是我的javascript，因此可以创建一个小导航项

(function($){
  var NavigationItem = Backbone.Model.extend({
    defaults: {
      name: '',
      href: '',
      last: false,
      id: ''
    },

    initialize: function() {

    }
  });

  var home = new NavigationItem({name: 'home', href: '/home', id:'home'});
  var about = new NavigationItem({name:'about', href: '/about'});
  var contact = new NavigationItem({name:'contact', href: '/contact', last:true});

  var TopNav = Backbone.Collection.extend({
    model: NavigationItem,
  });

  var topNav = new TopNav();

  NavView = Backbone.View.extend({  
    el : $('ul'), 

    initialize: function(){
      _.bindAll(this, 'render'); 
      this.render();  
    },  

    render : function() {
      var self = this;
      $(this.el).append("<li><a href="+home.get('href')+">"+home.get('name')+"</a></li>")
    }

  });

  var navView = new NavView();

})(jQuery);

我的问题是我如何循环遍历每个实例化的导航项并将其附加到 ul 元素而不写出每个项

我的另一个问题是你可以在没有数据绑定脚本的情况下使用主干吗，数据绑定在某种程度上看起来像是突兀的 javascript。还需要成为 underscore.js 方面的专家才能正确使用主干。下划线看起来就像一堆预定义的函数——jQuery 不提供一些与实用函数相同的函数吗？那么为什么甚至使用下划线是因为数据绑定？你可以使用没有数据绑定一切的主干吗？我很难学习主干，因为我觉得它模仿了经典语言，而不是像 Douglas Crockford 那样使用 Object.create() 之类的东西。是否有任何资源仅使用主干构建基本页面？我知道它不适用于小型应用程序，但我仍在尝试弄清楚它是如何工作的。

再次感谢任何帮助/资源。我刚开始为一家大公司工作，他们正在寻求为 javascript 实现 MVC 框架，主干似乎是理想的选择，但到目前为止我一直在努力学习。

Answer 1

下划线看起来就像一堆预定义的函数——jQuery 不提供一些与实用函数相同的函数吗？那么为什么甚至使用下划线是因为数据绑定？你可以使用没有数据绑定一切的主干吗？

下划线不处理 DOM，只处理 JavaScript。两者是正交的。

• 下划线是主干依赖项，您需要它才能使其工作。
• 如果您需要使用 DOM（和 ajax），则需要 jQuery/Zepto。
• 下划线至少用在模型和集合中，不管你是否直接使用。

我很难学习主干，因为我觉得它模仿了一种经典语言，而不是像 Douglas Crockford 那样使用 Object.create() 之类的东西。

• 您需要在需要时使用库 API，或使用其他库。当 Object.create 是经典继承时，Backbone 使用原型继承。 JavaScript 允许两者。

我的观点是，您不需要使用骨干网的所有功能，但您需要使用基本必需的功能才能使其正常工作。

Answer 2

Backbone 为这个问题提供了集合。任何 Backbone 视图都可以包含一个模型或一个集合。在您的示例中，您可以像这样构建一个集合：

var NavigationCollection = Backbone.Collection.extend({
    model : NavigationItem
});

然后，您将创建集合并附加所有项目：

var navCollection = new NavigationCollection();
navCollection.add(home);
navCollection.add(about);
navCollection.add(content);

然后你可以创建一个只显示所有内容的视图：

var navView = new NavView({
    collection : navCollection
});

这个视图类似于：

var NavView = Backbone.View.extend({  
    el : $('ul'), 

    initialize: function(){
        _.bindAll(this, 'render'); 
        this.render();  
    },  

    render : function() {
        this.collection.each(function (item) {
            this.$el.append("<li><a href=" + item.get("href") + ">" + item.get("name") + "</a></li>");
        }, this);
        return this; // remember this for chaining
    }

});

您可以有一个视图来显示每个单独的项目（以及一个subviews 属性，以便您可以引用它们），甚至可以有一个迭代此集合的模板。