通过更改事件调用方法时，主干集合为空

马上：这是我的第一个Backbone应用程序，所以如果有任何设计缺陷，我都会洗耳恭听。该应用程序的目的是根据输入值的变化绘制/重新绘制条形图。

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

当用户更改SliderModel中的值时，我在BarGraph中绑定了一个事件处理程序方法，这样我就可以根据输入动态地重新绘制图形。

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

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

var other=this.collection；

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

型号

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

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
});