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

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

输入值存储在

滑块模型中。
DataSeries
集合中的每个
DataPoint
模型都应该代表在
BarGraph
视图中绘制的一列数据

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

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

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

var other=this.collection

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

型号

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

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

首先，覆盖fetch等原始收集方法是个坏主意。你不需要那个

如果要添加一些测试数据而不进入服务器，请在集合定义之外使用
reset
方法或
add


我将只使用
model
属性保留集合。在“main”（jQuery就绪处理程序）中，填写以下数据：

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
事件，但这是一个模型事件。

通常情况下，最好是侦听
reset
事件，您可以像刚才那样自行重置集合，或者调用
collection.fetch（{reset:true}）
从服务器获取数据

建议使用
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();
}

我不知道为什么集合是未定义的，但您有一个周转解决方案，您可以像这样从模型访问集合：var other=this.model.collection，否则如果您可以创建一个JSFIDLE，我们就可以很容易地看到他的项目的问题我不需要任何服务器请求，只需操作页面上的数据（这是一个速率计算器）。在这种情况下，我想简单地将fetch方法设置为首先调用
this.reset（）
，然后向集合中添加5个空白
DataPoints
，还是有一个更干净/更好的实践方法？但问题是，为什么要重写一个方法？正如我的代码所示，它已经存在，并被称为
reset
。你试过了吗？我想我可能没有完全理解重置
所涉及的内容。它是否清除了集合，使其总模型计数为0？是的，但您也可以添加新模型，如我的示例所示。