Question

马上就开始了：这是我的第一个Backbone应用程序，所以如果有任何设计缺陷，我会全神贯注。此应用程序的目的是根据更改的输入值绘制/重新绘制条形图。

输入值存储在SliderModel中。 DataPoint集合中的每个DataSeries模型都应该代表在BarGraph视图中绘制的一列数据。

当用户更改SliderModel中的值{I}和BarGraph中的事件处理程序方法时，我可以根据输入动态重新绘制图形。

加载页面时，会运行updateCalculations视图中的BarGraph方法。正确处理计算并适当绘制图形（全为零）。

但是，一旦用户开始输入输入（即一个单个字符），下面的other变量（来自视图中的updateCalculations方法）将被评估为undefined

var other = this.collection;

由于某些原因，当通过更改collection属性调用BarGraph方法时，updateCalculations视图中的SliderModel被清除。

模型

包含默认值和计算方法的模型

var SliderModel = Backbone.Model.extend({
    initialize: function() {

    },

    defaults: {
        purchasePayment: '0',
        fixedRate: '0',
        returnSpx: '0',
        slidervalue: '0'
    },

    fixedAllocation: function () {
        return this.attributes.purchasePayment * (1 - (this.attributes.slidervalue / 100));
    },

    illustratedEoy: function() {
        return this.fixedAllocation() * Math.pow(1 + (this.attributes.fixedRate / 100), 7);
    },

    eoyContractVal: function (value) {
        return this.illustratedEoy() + parseFloat(value);
    }
});

模型/收藏

集合和模型类型的集合

var DataPoint = Backbone.Model.extend({

    initialize: function (lbl, ctrct, rtrn) {
        this.set({
            label: lbl,
            contract: ctrct,
            annReturn: rtrn
        })
    },
});

var DataSeries = Backbone.Collection.extend({

    model: DataPoint,

    fetch: function () {
        this.reset();
        this.add([
            new DataPoint("1/7yrs", "111830.17", "1.63%"),
            new DataPoint("2/7yrs", "115311.17", "2.07%"),
            new DataPoint("3/7yrs", "118984.65", "2.52%"),
            new DataPoint("4/7yrs", "122859.65", "2.98%"),
            new DataPoint("5/7yrs", "126947.77", "3.46%"),
            new DataPoint("6/7yrs", "131260.74", "3.94%"),
            new DataPoint("7/7yrs", "135810.92", "4.44%")
        ])
    }
});

查看

SliderModel是分配给此视图的模型。 DataSeries是分配给视图的集合。

var BarGraph = Backbone.View.extend({

    "el": "#graph",

    options: {barDemo: ""},

    initialize: function (options) {

        _.bindAll(this, "render");
        this.collection.bind("change", this.updateCollection);

        //Bind model change event to view event handler
        this.model.bind('change:purchasePayment', this.updateCollection);
        this.model.bind('change:slidervalue', this.updateCollection);
        this.model.bind('change:purchasePayment', this.updateCollection);
        this.model.bind('change:slidervalue', this.updateCollection);
        this.model.bind('change:fixedRate', this.updateCollection);
        this.model.bind('change:returnSpx', this.updateCollection);

        //Run setup methods
        this.drawGraph();
        this.collection.fetch();
        this.updateCollection();
    },

    drawGraph: function() {
        var margin = { top: 20, right: 20, bottom: 20, left: 20 };

        this.options.barDemo = d3.selectAll($(this.el)).append("svg:svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom + 20);
    },

    updateCollection: function () {
        var sum = 0.00;
        var that = this.model;

        //Collection shows as 'undefined' when this method is fired via change event
        var other = this.collection;

        var indexed = $.makeArray($('#IndexedTable').find('tbody tr'));

        var i = 0;
        this.collection.each(function (m) {
            var value = that.eoyContractVal(that.indexedIllustrated(i));
            sum = parseFloat(sum) + parseFloat(value);

            other.models[i].attributes.contract = value.toFixed(2);
            other.models[i].attributes.annReturn = that.annReturn(value).toFixed(2) + '%';
            i++;
        });

        this.render();
    },

    render: function () {

    },
});

的jQuery

如何初始化上述代码

var sliderModel = new SliderModel;
var dataSeries = new DataSeries();
new BarGraph({
    collection: dataSeries,
    model: sliderModel
});

Answer 1

首先，重写原始的Collection方法（如fetch）是一个坏主意。你不需要那个。

如果您想在不进入服务器的情况下添加一些测试数据，请在集合定义之外使用reset方法或add。

http://backbonejs.org/#Collection-reset

我会将该集合仅包含model属性。在您的“main”（您的jQuery ready处理程序）中，填写数据：

var slider = new SliderModel();
var dataSeries = new DataSeries();
var view = new BarGraph({
  model: slider,
  collection: dataSeries
});


dataSeries.reset([
  new DataPoint("1/7yrs", "111830.17", "1.63%"),
  new DataPoint("2/7yrs", "115311.17", "2.07%"),
  new DataPoint("3/7yrs", "118984.65", "2.52%"),
  new DataPoint("4/7yrs", "122859.65", "2.98%"),
  new DataPoint("5/7yrs", "126947.77", "3.46%"),
  new DataPoint("6/7yrs", "131260.74", "3.94%"),
  new DataPoint("7/7yrs", "135810.92", "4.44%")
]);

现在在您的视图中，您正在收听集合中的change事件，但这是一个模型事件。 http://backbonejs.org/#Events-catalog

通常情况下，最好是收听reset事件，您可以触发自己重置集合，就像我们刚才那样，或者调用collection.fetch({reset:true})从服务器获取数据。

建议练习使用listenTo函数进行事件处理，因为它会自动将函数上下文绑定到当前对象。 http://backbonejs.org/#Events-listenTo

所以你的初始化方法变为：

initialize: function (options) {

  _.bindAll(this, "render");
  this.listenTo(this.collection, "reset", this.updateCollection);

  //Bind model change event to view event handler
  //instead of individually listen to every attribute change
  //just listen to any change in one line
  this.listenTo(this.model, "change", this.updateCollection);

  //Run setup methods
  this.drawGraph();
  //not needed with fake data... or save it to a JSON file and fetch it!
  //this.collection.fetch();
  this.updateCollection();
}

当通过change事件调用方法时，Backbone集合为空

1 个答案: