在lobb.js中显示MVC的问题

Question

I am using the exact code from here: http://jsfiddle.net/sameersegal/NHAvS/ this is in backbone structure and what I want to do is that to separate them in three different files Model, view and collection. as you can see in this jsfiddle all of them (MVC) are in the same file. Now after doing this my problem is that the model and view and collection do not know eachother, these are the separated parts:

Model:

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

//////////////////////////////////////////////////////// Collection:

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

/////////////////////////////////////////////////////// View:

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

I got this error " w is not defined " which shows that the defined "w" in the model is not recognized in the view although I have added that.

So can you tell me what part I am missing in order to make the separate files to work together?

Answer 1

You lack a define in your view.

Your code

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

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

Should be

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

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

if DataPointTemplate should be the template from templates/DataSeries.html then you are good to go otherwise you would need to change it to be the right template.

Answer 2

The error is in this line:

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

Specificly in this jquery chain method .attr("width", w) , where you dont provide the paramater w in your model initialization. You will then see that in this chain method .attr("height", h) you also forgot to initialize the `h' paramater.

I suggest that you add both paramaters in the model initialization like so:

var w = $(this.el).width(), h = $(this.el).height();

Answer 3

I see one issue in your model. You define the variable( datapoint ), but your returned value is DatapointModel .