javascript - 无法读取 null 的属性 'replace'。 Backbone js

Question

我得到一个

Uncaught TypeError: Cannot read property 'replace' of null

这是我认为发生错误的js部分

var DirectoryView = Backbone.View.extend({
        $el: $("#contacts"),

        initialize: function () {
            this.collection = new Directory(contacts);

            this.render();
        },

        render: function () {
            var that = this;
            _.each(this.collection.models, function (item) {
                that.renderContact(item);
            }, this);
        },

        renderContact: function (item) {
            var contactView = new ContactView({
                model: item
            });
            this.$el.append(contactView.render().el);
        }
    });

这是我的 index.html 文件

{% extends 'base.html.twig' %}

    {% block javascripts %}

      {{ parent() }}



    {% endblock %}
    {% block body %}
      <meta charset="UTF-8" />
      <title>Backbone.js Web App changed</title>


      <div id = 'contacts'>
      <script id = "contactTemplate" type="text/template">
        <img src = "<%= photo %>" alt ="<%= name %>">
        <h1>Name : <%= name %><span><%= type %></span></h1>
        <div><%= address%></div>
        <dl>
          <dt>Tel: </dt><dd> <%= tel%></dd>
          <dt>Email: </dt><dd> <%= email%></dd>
        </dl>
      </script>
      </div>
  {% endblock %}

错误的完整堆栈跟踪

c.template @ underscore-min.js:24Backbone.View.extend.render @ 94260d1_app_3.js:34Backbone.View.extend.renderContact @ 94260d1_app_3.js:62(anonymous function) @ 94260d1_app_3.js:54c.each.c.forEach @ underscore-min.js:8Backbone.View.extend.render @ 94260d1_app_3.js:53Backbone.View.extend.initialize @ 94260d1_app_3.js:48e.View @ backbone-min.js:23d @ backbone-min.js:27(anonymous function) @ 94260d1_app_3.js:67(anonymous function) @ 94260d1_app_3.js:69

这是我完整的 app.js 文件

  (function ($) {

    //demo data
    var contacts = [
        { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
        { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
        { name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" },
        { name: "Contact 4", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "colleague" },
        { name: "Contact 5", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" },
        { name: "Contact 6", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "colleague" },
        { name: "Contact 7", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" },
        { name: "Contact 8", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" }
    ];

    //define product model
    var Contact = Backbone.Model.extend({
        defaults: {
            photo: "/img/placeholder.png"
        }
    });

    //define directory collection
    var Directory = Backbone.Collection.extend({
        model: Contact
    });

    //define individual contact view
    var ContactView = Backbone.View.extend({
        tagName: "article",
        className: "contact-container",
        template: $("#contactTemplate").html(),

        render: function () {
            var tmpl = _.template(this.template);

            $(this.el).html(tmpl(this.model.toJSON()));
            return this;
        }
    });

    //define master view
    var DirectoryView = Backbone.View.extend({
        $el: $("#contacts"),

        initialize: function () {
            this.collection = new Directory(contacts);

            this.render();
        },

        render: function () {
            var that = this;
            _.each(this.collection.models, function (item) {
                that.renderContact(item);
            }, this);
        },

        renderContact: function (item) {
            var contactView = new ContactView({
                model: item
            });
            this.$el.append(contactView.render().el);
        }
    });

    //create instance of master view
    var directory = new DirectoryView();

} (jQuery));

我将 symfony 与 twig 模板一起使用。这是你的教程 http://code.tutsplus.com/tutorials/build-a-contacts-manager-using-backbonejs-part-1--net-24277

Answer 1

创建 View 的语法 $el已关闭，您应该只分配 el

el: '#contacts`

backbone会自动在$el中缓存jQuery元素。

这是一个指向 jsbin 的链接有了那个改变。