5

私はバックボーンの完全な初心者であり、バックボーンを構造として使用してWebページを1つか2つ作成することにしました。私の最初のタスクは、基本的なナビゲーションを作成することです。私のページはここにありますhttp://dalydd.com/projects/backbone.html ここに私のjavascriptがあるので、その1つの小さなナビゲーションアイテムを作成するための毛皮です

(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フレームワークの実装を検討しており、バックボーンは理想的な選択肢のようですが、これまでのところ学ぶのに苦労しています。

4

2 に答える 2

2

アンダースコアは、事前定義された関数の集まりのように見えます-jQueryは、ユーティリティ関数と同じ関数のいくつかを提供していませんか？では、なぜアンダースコアを使用するのもデータバインディングのためなのですか？すべてをデータバインディングせずにバックボーンを使用できますか？

アンダースコアはDOMを処理せず、JavaScriptのみを処理します。2つは直交しています。

  • アンダースコアはバックボーンの依存関係であり、機能させるにはアンダースコアが必要です。
  • DOM（およびajax）を操作する必要がある場合は、jQuery/Zeptoが必要です。
  • アンダースコアは、直接使用するかどうかに関係なく、少なくともモデルとコレクションで使用されます。

Douglas Crockfordが使用するObject.create（）のようなものを使用するのではなく、古典言語を模倣しているように感じるため、バックボーンを学習するのに苦労しています。

  • 必要に応じてライブラリAPIを使用するか、別のライブラリを使用する必要があります。Object.createが古典的な継承である場合、バックボーンはプロトタイプの継承を使用します。JavaScriptは両方を許可します。

私のポイントは、バックボーンのすべての機能を使用する必要はありませんが、それを機能させるために必要な基本的な機能を使用する必要があるということです。

于 2012-12-19T06:18:10.047 に答える
1

バックボーンは、この問題のコレクションを提供します。すべてのバックボーンビューは、モデルまたはコレクションを保持できます。あなたの例では、次のようなコレクションを作成できます。

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属性、つまりそれらを参照できるようにする）を表示するためのビュー、またはこのコレクションを反復処理するテンプレートを表示することもできます。

于 2012-12-19T11:23:01.680 に答える