Javascript 在主干网中创建基本导航

我是一个完全不懂主干网的人，我决定尝试使用主干网作为结构创建一两个网页。我的第一个任务是创建一个基本导航。 我的网页就在这里 下面是我创建一个小导航项的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);

（函数（$）{
var NavigationItem=Backbone.Model.extend({
默认值：{
名称：“”，
href:“”，
最后：错，
id:“”
},
初始化：函数（）{
}
});
var home=new NavigationItem（{name:'home'，href:'/home'，id:'home'}）；
var about=新导航项（{name:'about'，href:'/about'}）；
var contact=new NavigationItem（{name:'contact'，href:'/contact'，last:true}）；
var TopNav=Backbone.Collection.extend({
型号：NavigationItem，
});
var topNav=新的topNav（）；
NavView=Backbone.View.extend（{
el:$（'ul'），
初始化：函数（）{
_.bindAll（这是“呈现”）；
这个。render（）；
},  
render:function（）{
var self=这个；
$（this.el）。追加（“
”）
}
});
var navView=新的navView（）；
})（jQuery）；

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

我的另一个问题是，您是否可以在不绑定脚本的情况下使用主干网，数据绑定在某种程度上看起来像是突兀的javascript。为了正确使用主干网，还需要成为underline.js方面的专家。下划线看起来就像一堆预定义的函数——jQuery不提供一些与实用程序函数相同的函数吗？那么为什么要使用下划线是因为数据绑定？您可以使用主干网而不绑定任何数据吗？我在学习主干时遇到了困难，因为我觉得它模仿了经典语言，而不是像道格拉斯·克罗克福德那样使用Object.create（）之类的东西。是否有任何资源只是使用主干构建一个基本页面？我知道它不适用于小型应用程序，但我仍在试图弄清楚它是如何工作的

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

下划线看起来就像一堆预定义的函数——jQuery不提供一些与实用程序函数相同的函数吗？那么为什么要使用下划线是因为数据绑定？您可以使用主干网而不绑定任何数据吗

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

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

我在学习主干时遇到了困难，因为我觉得它模仿了经典语言，而不是像道格拉斯·克罗克福德那样使用Object.create（）之类的东西

• 您需要在需要时使用库API，或者使用另一个库。当Object.create是经典继承时，主干使用原型继承。JavaScript允许这两种方式

---

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

主干网为此提供了集合。任何主干视图都可以保存模型或集合。在您的示例中，您可以构建如下集合：

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
    }

});

var NavView=Backbone.View.extend（{
el:$（'ul'），
初始化：函数（）{
_.bindAll（这是“呈现”）；
这个。render（）；
},  
render:function（）{
此.集合.每个（功能（项）{
本.$el.追加（“
”）；
}，这个）；
返回此；//记住此链接
}
});

---

您可以使用一个视图来显示每个单独的项目（以及一个

子视图

属性，以便您可以引用它们），甚至可以使用一个模板来迭代此集合。

谢谢Meta-这是一个巨大的帮助-我唯一更改的是var navView=new navView（{collection:navCollection}）；因为你有NavigationView，这让我很困惑，但我想出来了，我把它放在下面扩展扩展视图是的，对不起^^这是一个打字错误。很高兴它有帮助！谢谢你的洞察力加缪。我觉得Object.create更像是原型，不像Backbone那样是伪经典的（也许你只是把它们弄混了），当我使用Backbone时，我使用了很多不同的东西。create if（typeof Object.create！='function'）{Object.create=function（o）{function F（）{}F.prototype=o；return new F（）；}；}newObject=Object.create（oldObject）；这里是在js中构建内置对象的原型。关于jQuery，我的另一个观点是它提供了很多实用函数，这些函数不一定要使用DOM来工作，比如.extend、.map等等