Question

我正在学习Backbone，我无法理解el和tagname之间的区别。我调查了这个BackboneJs: In a view whats the difference between el: and 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时，它就会停止工作为什么请用外行语言指导我。

Answer 1

根据文档（http://backbonejs.org/#View-el），el属性用作DOM元素的引用，而tagName用于创建元素。

这意味着当您将字符串指定为el时，它将在现有DOM树（基本上是您的HTML）中查找与该选择器匹配的元素（它将用作jquery选择器）。由于您的标记中没有li元素，因此el将为null，并且视图将无法初始化。

另一方面，当您使用tagName时，backbone会自动使用它来创建新元素并将其分配给el属性。
但请注意，必须将新创建的元素添加到DOM中。这是您在VehiclesView中使用行self.$el.append(vehicleView.render().$el);

执行的操作

骨干中el和tagname的区别

1 个答案: