0

以下に示すように、employee_collection、employee_model、employee_collection_view、およびemployee_viewがあります。

employee_collection の Javascript

var EmployeeCollection = Backbone.Collection.extend({
  url: "/employees"
})

employee_model の場合

var Employee = Backbone.Model.extend({

  toogleStatus: function(){
    if(this.get('fired') === true){
      this.set({fired: false});
    }else{
      this.set({fired: true});
    }
    this.save();
  }
});

employee_collection_view の場合

var EmployeeListView = Backbone.View.extend({
  tagName: 'table',
  className: "table table-striped",
  initialize: function(options){
    this.display_type = options.display_type
  },

  render: function(){
    this.collection.models.forEach(this.addOne, this);
  },
  addOne: function(employee){
    console.log(this.display_type);
      var employeeView = new EmployeeView({model: employee});
      employeeView.render();
      this.$el.append(employeeView.el);
  }
});

employee_view の場合

var EmployeeView = Backbone.View.extend({
  tagName: "tr",
  template: _.template("<td><%= first_name %></td><td><%= last_name %> </td><td> <%= address %></td><td> <%= phone %></td><td><%= fired %></td><td><input type='button' value=<% (fired === true) ? print('hire') : print('fire') %> /></td>"),
  initialize: function(){
    this.model.on('change', this.render, this);
  },
  events: {
    'click input[type="button"]': 'toogleStatus'
  },

  toogleStatus: function(){
    console.log(this.model);
    this.model.toogleStatus();
  },
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    console.log(this.$el.html());
  },
  setupView: function(){
    console.log($("#employees_list").html());
  }
});

ページが読み込まれた後、ホームページで従業員リストを確認できます。最後の列には、解雇属性が true の場合は雇用、解雇ステータスが false の場合は解雇のボタンがあります。

しかし、私を悩ませているのは、ボタン(fire/hire)を押すと、employee_viewのtoogleStatusがトリガーされますが、エラーが発生することです

this.model.toogleStatus();

言って

TypeError: this.model.toogleStatus is not a function
this.model.toogleStatus();

this.model をログに記録し、印刷しました。

employee_model で toogleStatus() メソッドを定義しましたが、関数ではないと表示されます。私は何か疲れていますか？

application.js には次のコードがあります。

$(function(){
  var router = new Router();

  router.on('route:home', function(){
    var employeeCollection = new EmployeeCollection();
    employeeCollection.fetch({
      success: function(employees){
        var employeeListView = new EmployeeListView({collection: employees, display_type: "grid"});
        employeeListView.render("table");
        $('.page').html(employeeListView.el);
      }
    });

  });
  Backbone.history.start();
});

ありがとう

4

1 に答える 1

2

EmployeeCollection次のように、使用するモデル サブクラスを指定する必要があります。

var EmployeeCollection = Backbone.Collection.extend({
  url: "/employees",
  model: Employee
})

デフォルトでは、コレクションは基本的な親クラスをインスタンス化するため、サブクラスのカスタム メソッドBackbone.Modelはありません。Employee

于 2013-02-11T05:01:04.070 に答える