Javascript Backbone.js TypeError:无法读取未定义的属性

我正在试用Backbone.js，对它来说还很陌生，但在下面的代码中，我无法在View initialize函数中正确绑定this.listenTo

此主干代码是一个单独的js文件

    'use strict';

let Preloadcart = function ( $, Backbone, _ ) {
  // console.log(Backbone);
  console.log(this);
  let
    // fnSelf = this,
    // Model-each unit comprises of this
    Service = Backbone.Model.extend({
      defaults:{
        title:'',
        price: 0,
        checked: false
      },

      type: 'Service',

      toggleCheck: () => {
        this.set('checked', !this.get('checked'));
      }
    }),

    // Collection- of such Service instances
    ServiceList = Backbone.Collection.extend({

      // collection based on this model
      model: Service,

      type: 'ServiceList',

      // get model instances with attribute checked=true
      getChecked: () => {
        console.log(`checking ${this.type}`);
        return this.where({checked:true});
      },
    }),

    services = new ServiceList([
            new Service({ title: 'web development', price: 200}),
            new Service({ title: 'web design', price: 250}),
            new Service({ title: 'photography', price: 100}),
            new Service({ title: 'coffee drinking', price: 10})
            // Add more here
        ]),

    // View of each Service model unit
    ServiceView = Backbone.View.extend({
      tagName: 'li',

      type: 'ServiceView',

      events: {
        'click': 'toggleService'
      },

      initialize: () => {
        console.log(`initializing ${this.type}`);
        _.bindAll(this, 'toggleService', 'render');

        this.listenTo(this.model, 'change', this.render);
      },

      toggleService: () => {
        this.model.toggle();
      },

      render: () => {
        let
          $frag = $(document.createDocumentFragment()),
          $htmlCheckbox = $('<input>', {
            type:'checkbox',
            value: 1,
            name: this.model.get('title'),
          }),
          $htmlSpan = $('<span>', {
            value: `\$${this.model.get('price')}`,
          });

        $htmlCheckbox.append(this.model.get('title'));
        $htmlCheckbox.append($htmlSpan);
        this.$htmlCheckbox.prop('checked', this.model.get('checked'));

        $frag.append($htmlCheckbox);
        this.$el.append($frag);

        return this;
      }
    }),

    App = Backbone.View.extend({
      el: $('#main'),

      type: 'App',

      initialize: function () {
        // listen on the collection instance of ServiceList, services
        console.log(`initializing App ${this.type}`);
        let
          view, that= this;
        this.total = 0,
        this.collection = services;

        _.bindAll(this, 'render');

        this.listenTo(this.collection, 'change', this.render);

        _(this.collection.models).each( (model) => {
          view = new ServiceView();
          view.set({model: model});
          that.$('#services').append(view.render().el);
        }, this);
      },

      render: () => {

        _.each(this.collection.getChecked(), (each) => {
          this.total += each.get('price');
        });

        this.$('#total-value').text(`\$${this.total}`);
      }
    }),

    AppView = new App();

  // new App();
  // return App;

};


export default Preloadcart;

但是抛出了一个错误：

preloadCart.js:57 Uncaught TypeError: Cannot read property 'type' of undefined

我在错误日志中跟踪时发现的问题如下：

_.bindAll(this, 'toggleService', 'render');

及

在ServiceView

下初始化

功能

此

在我输出时未定义。我错过了什么

如果对代码有任何混淆，请告诉我，我会尽量简化

initialize: () => {
        console.log(`initializing ${this.type}`);
        _.bindAll(this, 'toggleService', 'render');

        this.listenTo(this.model, 'change', this.render);
      },

定义初始化函数时，将调用箭头运算符。 就在调用预加载购物车时。因此，在函数initialize中，“this”不是viewobject，而是调用preload cart时的“this”。使用正常功能

initialize: function() {
            console.log(`initializing ${this.type}`);
            _.bindAll(this, 'toggleService', 'render');

            this.listenTo(this.model, 'change', this.render);
          },

---

$el:$（“#main”）

很奇怪，你为什么这么做？您对

initialize

值的

函数.prototype.bind

调用也很奇怪，您希望

这个

在那个上下文中是什么，为什么您要尝试

绑定那里？@muistooshort
$el
-这样无论何时选择那个元素，我都会选择这个值。绑定-这意味着我必须已经尝试了一切，作为最后手段，我尝试绑定到
this
，这是
App
@muistooshort。我看到的大多数示例都是jQuery中的函数。但是，如果我运行一个导入到的主干js文件，比如一个主文件，该怎么办呢。您建议如何运行该系统？该系统中的哪一部分说明了提供这样的
$el
？为什么要尝试绑定
初始化
？当您将
初始化
绑定到错误的
this
时，为什么希望
this.listenTo
工作？我建议回到教程中，试着一块一块地构建它。让我们暂时忘掉$el@muistooshort。我没有任何约束就试过了。也如果脚本是say file.js，然后我导入并运行它，正如我在问题中所述，它仍然会给出相同的错误。顺便说一句，这个错误与$elah没有任何关系，你说得对。这个匿名操作员写起来很容易，但在你知道的地方，这是一个很大的痛苦。让我看看这是否有效。箭头操作符应该用在函数中，而不是定义原型的时候。你知道你的javascriptbeauty总是令人痛苦的
initialize: () => {
        console.log(`initializing ${this.type}`);
        _.bindAll(this, 'toggleService', 'render');

        this.listenTo(this.model, 'change', this.render);
      },

initialize: function() {
            console.log(`initializing ${this.type}`);
            _.bindAll(this, 'toggleService', 'render');

            this.listenTo(this.model, 'change', this.render);
          },