Проблема с отображением MVC в backbone.js

Question

Я использую точный код отсюда: 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 не определен», которая показывает, что определенный «w» в модели не распознается в представлении, хотя я добавил это.

Итак, можете ли вы рассказать мне, какую часть мне не хватает, чтобы отдельные файлы работали вместе?

Answer 1

Вам не хватает определения на ваш взгляд.

Ваш код

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, то вы хорошо идти в противном случае вы должны были бы изменить его, чтобы быть правильным шаблоном.

Answer 2

Ошибка в этой строке:

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 в этом Jquery методом цепной .attr("width", w), где вы не делаете обеспечить w в В параметре вашей инициализации модели. Затем вы увидите, что в этом цепочном методе .attr("height", h) вы также забыли инициализировать параметр `h '.

Я предлагаю вам добавить оба в Счетчики инициализации модели следующим образом:

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

Answer 3

Я вижу одну проблему в вашей модели. Вы определяете переменную (datapoint), но ваше возвращенное значение равно DatapointModel.