当我的收藏价值发生变化时如何改变视图答案

【问题标题】：How do I change view when the value of my collection changes当我的收藏价值发生变化时如何改变视图
【发布时间】：2015-09-22 18:56:29
【问题描述】：

我创建了一个简单的骨干图书库项目，它有 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
    }
});

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

【问题讨论】：

所以你需要在你的模型上设置一个变化监听器。这是一篇关于这样做的一些注意事项的好文章。 ozkatz.github.io/avoiding-common-backbonejs-pitfalls.html
如何在我的模型中设置更改监听器？

标签： javascript backbone.js model-view-controller

【解决方案1】：

你的视图应该通过listenTo订阅收集事件：

var BookView= Backbone.View.extend({
    initialize: function(){
        this.collection= new BookCollection();
        this.listenTo(this.collection, "add", this.someMethod);
    }
});

【讨论】：

我不想听添加事件。我将处理 json 数据，然后我需要收听处理过的数据
在 Backbone 集合中有这样的事件：添加、删除、更新、重置、排序、销毁。你可以选择你需要的。您也可以触发带有目标名称的事件。
如果我使用 this.listenTo(this.collection, "add", this.someMethod); this.someMethod 将调用我的数组时间的大小。但我需要处理数据并需要监听处理过的数据
我认为您的逻辑有些错误。这： var chart_data=[]; ...; this.chart_data=chart_data;应该属于模型级别。您应该创建适当的模型并将其传递给集合。集合应该只存储模型项并在它们上执行。
谢谢，那我的业务逻辑应该去哪里呢？我的意思是我将从服务器获取对象数组。流程逻辑函数在哪里写？视图/模型？

【解决方案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
  }
});

是否使用集合而不是单个模型来处理您的所有数据已经answered in your other question。

【讨论】：