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的专家才能正确使用骨干。 Underscore看起来像是一堆预定义的函数 - jQuery不提供与实用程序函数相同的功能吗？那么为什么甚至使用下划线是因为数据绑定？你可以使用骨干w / o数据绑定一切吗？我很难学习骨干，因为我觉得它模仿了一种经典语言，而不是像Douglas Crockford那样使用像Object.create（）这样的东西。是否有任何资源只使用骨干构建基本页面？我知道它不适用于小型应用程序，但我仍然在试图弄清楚它是如何工作的。

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

Answer 1

Underscore看起来像是一堆预定义的函数 - jQuery不提供与实用程序函数相同的功能吗？那么为什么甚至使用下划线是因为数据绑定？你能使用骨干w / o数据绑定一切吗？

Underscore不处理DOM，只处理JavaScript。两者是正交的。

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

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

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

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

Answer 2

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属性，以便您可以参考它们），甚至是一个迭代此集合的模板。

在骨干网中创建基本导航

2 个答案: