Question

我创建了一个简单的骨干书库项目，它有1个模型，视图，集合。当我从集合中获取数据时，我将处理JSON数据并将处理后的数据设置为集合中的变量，以在Google图表中显示它。如何在Backbone中听取处理后的变量变化？

这是我的代码

模型

var BookModel= Backbone.Model.extend({
    defaults:{
        id:'',
        name: '',
        author: ''
    }
});

集合

var BookCollection= Backbone.Collection.extend({
    model: BookModel,

    initialize: function(){
        this.fetchData();
    },

    fetchData: function(){
        this.url= "/get/all_books";

        this.fetch({
            success: success_callback,
            error: error_callback
        })
    },

    success_callback: function(that, data){
        var chart_data=[];

        //Process logic goes here. chart_data has the data i need

        // I need to listen this.chart_data value change in view
        this.chart_data= chart_data;

    },

    error_callback: function(){

    }
});

查看

var BookView= Backbone.View.extend({
    initialize: function(){
        this.collection= new BookCollection();
    } 

    drawChart: function(){
        //Google Chart Goes here, when ever the chart_data variable changes
    }
});

如果我的任何代码约定不好，请纠正我。谢谢

Answer 1

您的观点应通过var BookView= Backbone.View.extend({ initialize: function(){ this.collection= new BookCollection(); this.listenTo(this.collection, "add", this.someMethod); } });订阅收集活动：

{{1}}

Answer 2

首先，由于您没有使用返回的数据来创建任何模型，因此您应该只使用模型。重写parse方法允许您返回要在模型上设置的操纵属性哈希。

var BooksModel = Backbone.Model.extend({
  url: 'get/all_books',
  initialize: function() {
    this.fetch();
  },
  parse: function(resp) {
    var data = resp.map(function(dataItem) {
      // Do stuff with your data.
    });
    return data;
  }
});

然后，您可以在视图中创建模型并收听其上的任何更改事件。当模型中的数据发生变化时，您将绘制图表。

var BooksView = Backbone.View.extend({
  initialize: function(){
    this.model = new BooksModel();
    this.listenTo(this.model, 'change', this.drawChart);
  },
  drawChart: function(){
    var modelData = this.model.toJSON();
    //Google Chart Goes here, when ever the chart_data variable changes
  }
});

是否使用集合代替包含所有数据的单个模型a queue triggered function。

如何更改我的集合的值时更改视图

2 个答案: