バックボーンのelとtagnameの違い

私はバックボーンを学んでおり、elとtagnameの違いを理解できません。私はこれを調べたBackboneJs: In a view whats the difference between el: and tagName:。しかし、私は理解できませんでした。バックボーンのelとtagnameの違い

以下は今まで私が持っていたものです。

スクリプトの例：

 // Vehicle Model 
     var Vehicle = Backbone.Model.extend(
     { 
      idAttribute: "registrationNumber", 
      urlRoot: "/api/vehicles", 
      validate: function(attrs) 
      { 
       if(!attrs.registrationNumber) 
        return "Vehicle without reistration"; 

      } 
     }); 

     // Vehicle Collection 
     var Vehicles = Backbone.Collection.extend(
     { 
      model: Vehicle 
     }); 

     // Vehicle View 
     var VehicleView = Backbone.View.extend(
     { 
      tagName: "li", 
//******************************************************* 
    // el: "li" **THIS DOES NOT WORK!! 
//********************************************************** 
      render: function() 
      { 
       var source = $("#vehicleTemplate").html(); 
       var template = _.template(source); 
       this.$el.html(template(this.model.toJSON())); 
       return this; 
      } 
     }); 

     // Vehicle View for collection 
     var VehiclesView = Backbone.View.extend({ 
      render: function() { 
       var self = this; 
       this.collection.each(function(vehicle) { 
        var vehicleView = new VehicleView({ 
         model: vehicle 
        }); 
        self.$el.append(vehicleView.render().$el); 
       }); 
      } 
     }); 

     // creating collection 
     var vehicles = new Vehicles(
      [ 
       new Vehicle({registrationNumber: "ABCD1234"}), 
       new Vehicle({registrationNumber: "ABCD5678"}), 
       new Vehicle({registrationNumber: "DCBA1234"}), 
       new Vehicle({registrationNumber: "DCBA1423"}) 
      ]); 

     // instance for vehicles View 
     var vehiclesView = new VehiclesView({collection: vehicles, el: "#vehicleAnchor"}); 
     vehiclesView.render();

Index.htmlと

<!DOCTYPE html> 
<html class="no-js"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" href="css/normalize.min.css"> 
     <link rel="stylesheet" href="css/main.css"> 
     <link rel="stylesheet" href="css/styles.css"> 

     <script src="js/lib/modernizr-2.6.2.min.js"></script> 
    </head> 
    <body> 
    <ul id = "vehicleAnchor"> 
    </ul> 
     <script src="js/lib/jquery-min.js"></script> 
     <script src="js/lib/underscore-min.js"></script> 
     <script src="js/lib/backbone-min.js"></script> 

     <script id = "vehicleTemplate" type = "text/html"> 
     <%= registrationNumber%> 
     </script> 
     <script src="js/main.js"></script> 
    </body> 
</html>

すべてが正常に動作しているが、私はtagName with elを交換する際に素人の言語で私を導いてくださいなぜ、それが動作を停止します。

出典

2016-07-25 Unbreakable

ドキュメント（http://backbonejs.org/#View-el）によると、elプロパティはDOM要素への参照として使用されますが、tagNameは要素の作成時に使用されます。

これは、文字列をelとして指定すると、そのセレクタに一致する要素（既存のHTML）で既存のDOMツリー（jqueryセレクタとして機能します）を検索します。マークアップにli要素がないため、elはnullになり、ビューは初期化できません。

tagNameを使用している場合、バックボーンは自動的にそれを使用して新しい要素を作成し、elプロパティに割り当てます。
ただし、新しく作成した要素をDOMに追加する必要があります。これはVehiclesViewの行で行います。self.$el.append(vehicleView.render().$el);

出典

2016-07-25 21:09:39

"新しく作成した要素をDOMに追加する必要があることに注意してください。"と言ったように、tagNameは文字列に似ていてDOMに追加されるそれは論理的な意味を持っています。したがって、DOMに追加することが不可欠です。私は正しい？ – Unbreakable

tagNameは、ビューになるhtml要素です。それは 'div'（デフォルトのタグ名はdiv）、' li'や 'header'や' table'です。任意の有効なhtml要素は、tagNameにすることができます。 –

Unbreakable：あなたはDOMNameにtagNameを追加するわけではありません。 Ericが書いているように、作成される要素のタイプを決定するために使用されます。あなたが追加しているのは依然としてエルです。また、elオブジェクトは他のDOM要素と同じロジックを持ちますが、DOMに追加されるまではどこにも描画されません –

バックボーンのelとtagnameの違い

答えて

関連する問題