0

我正在使用这里的确切代码:http: //jsfiddle.net/sameersegal/NHAvS/这是骨干结构,我想要做的是将它们分成三个不同的文件模型、视图和集合。正如您在这个 jsfiddle 中看到的,所有这些(MVC)都在同一个文件中。现在这样做之后我的问题是模型和视图和集合不知道彼此,这些是分开的部分:

模型:

define([
    "jquery",
    "underscore",
    "backbone"
    ], function($,_, Backbone){
    var datapoint = Backbone.Model.extend({

        initialize: function(x) {
        this.set({
            x: x
        });
    },

    type: "point",

    randomize: function() {
        this.set({
            x: Math.round(Math.random() * 10)
        });
    }

    });
    return DatapointModel;
});

///////////////////////////////////////// ////// 收藏:

define([
    "underscore",
    "backbone",
    "js/models/hitMissModel"

    ],function(_, Backbone, DatapointModel){

        var dataSeriesCollection = Backbone.Collection.extend({

            model : DatapointModel,

                fetch: function() {
                this.reset();
                this.add([
                new DataPointModel(10),
                new DataPointModel(12),
                new DataPointModel(15),
                new DataPointModel(18)
                ]);
            },

        randomize: function() {
        this.each(function(m) {
            m.randomize();
        });
    }
        });
        return DataSeriesCollection;
});

///////////////////////////////////////// ///// 看法:

define([
    "jquery",
    "underscore",
    "backbone",
    "d3",
    "js/models/DatapointModel",
    "js/collections/DataseriesCollection",
    "text!templates/DataSeries.html"

    ], function($, _ , Backbone,  d3 ,
    dataPointModel,
    DataSeriesCollection){

    var BarGraphView = Backbone.View.extend({

        el : $("#graph"),
        headerTemplate : _.template(HeaderTemplate),
        DataPointTemplate : _.template(DataPointTemplate),



        initialize : function(){

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

            this.chart = d3.selectAll($(this.el)).append("svg").attr("class", "chart").attr("width", w).attr("height", h).append("g").attr("transform", "translate(10,15)");

            this.collection.fetch();

        },



        render : function(){
            //this.licenseModel.fetch();
            this.$el.html(this.DataPointTemplate());
            return this;
        },


        renderGraph: function() {

        var data = this.collection.models;

        var x = d3.scale.linear().domain([0, d3.max(data, function(d) {
            return d.get("x");
        })]).range([0, w - 10]);

        var y = d3.scale.ordinal().domain([0, 1, 2, 3]).rangeBands([0, h - 20]);

        var self = this;
        var rect = this.chart.selectAll("rect").data(data, function(d, i) {
            return i;
        });

        rect.enter().insert("rect", "text").attr("y", function(d) {
            return y(d.get("x"));
        }).attr("width", function(d) {
            return x(d.get("x"));
        }).attr("height", y.rangeBand());

        rect.transition().duration(1000).attr("width", function(d) {
            return x(d.get("x"));
        }).attr("height", y.rangeBand());

        rect.exit().remove();

        var text = this.chart.selectAll("text").data(data, function(d, i) {
            return i;
        });

       text.enter().append("text")
        .attr("x", function(d) {
            return x(d.get("x"));
        })
        .attr("y", function(d,i) { return y(i) + y.rangeBand() / 2; })
        .attr("dx", -3) // padding-right
        .attr("dy", ".35em") // vertical-align: middle
        .attr("text-anchor", "end") // text-align: right
           .text(function(d) { return d.get("x");});

        text
        .transition()
        .duration(1100)
        .attr("x", function(d) {
            return x(d.get("x"));
        })
         .text(function(d) { return d.get("x");});


    },

    frame: function() {

        this.chart.append("line").attr("y1", 0).attr("y2", h - 10).style("stroke", "#000");

        this.chart.append("line").attr("x1", 0).attr("x2", w).attr("y1", h - 10).attr("y2", h - 10).style("stroke", "#000");
    }

    });

    $(function() {

    var dataSeriesCollection = new DataSeriesCollection();
    new BarGraphView({
        collection: dataSeriesCollection
    }).render();

    setInterval(function() {
        DataSeriesCollection.randomize();
    }, 2000);

    });
    return BarGraphView;
});

我得到了这个错误“w is not defined”,这表明模型中定义的“w”在视图中没有被识别,尽管我已经添加了。

那么你能告诉我为了使单独的文件一起工作而我缺少什么部分吗?

4

3 回答 3

0

您的观点缺乏定义。

你的代码

define([
    "jquery",
    "underscore",
    "backbone",
    "d3",
    "js/models/DatapointModel",
    "js/collections/DataseriesCollection",
    "text!templates/DataSeries.html"

    ], function($, _ , Backbone,  d3 ,
    dataPointModel,
    DataSeriesCollection){

应该

define([
    "jquery",
    "underscore",
    "backbone",
    "d3",
    "js/models/DatapointModel",
    "js/collections/DataseriesCollection",
    "text!templates/DataSeries.html"

    ], function($, _ , Backbone,  d3 ,
    dataPointModel,
    DataSeriesCollection, DataPointTemplate){

如果DataPointTemplate应该是模板,templates/DataSeries.html那么你很好,否则你需要将它更改为正确的模板。

于 2013-08-20T12:50:00.613 回答
0

我在您的模型中发现了一个问题。您定义了变量(datapoint),但您的返回值是DatapointModel

于 2013-08-20T13:28:06.490 回答
0

错误在这一行:

this.chart = d3.selectAll($(this.el)).append("svg").attr("class", "chart").attr("width", w).attr("height", h).append("g").attr("transform", "translate(10,15)");

特别是在这个 jquery 链方法.attr("width", w)中,您没有w在模型初始化中提供参数。然后你会看到在这个链方法中.attr("height", h)你也忘记了初始化“h”参数。

我建议您在模型初始化中添加两个参数,如下所示:

var w = $(this.el).width(), h = $(this.el).height();
于 2013-08-20T12:53:03.157 回答