骨干中el和tagname的區別

Question

我正在學習Backbone，我無法理解el和tagname之間的區別。 我查看了這個BackboneJs：在一個視圖中，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替換tagName with el ，它停止工作為什么請用外行語言指導我。

Answer 1

根據文檔（ http://backbonejs.org/#View-el ），則el屬性用作到DOM元素的引用，而當創建元素使用的標記名。

這意味着當您將字符串指定為el ，它將在現有DOM樹（基本上是您的HTML）中查找與該選擇器匹配的元素（它將用作jquery選擇器）。 由於標記中沒有li元素，因此el將為null，並且視圖將無法初始化。

另一方面，當您使用tagName時，backbone會自動使用它來創建新元素並將其分配給el屬性。
但請注意，必須將新創建的元素添加到DOM中。 這就是您在VehiclesView使用self.$el.append(vehicleView.render().$el);

骨干中el和tagname的區別

問題描述

1 個解決方案

解決方案1
3 已采納 2016-07-25 21:09:39

骨干中el和tagname的區別

問題描述

1 個解決方案

解決方案1 3 已采納 2016-07-25 21:09:39

解決方案1
3 已采納 2016-07-25 21:09:39