[英]issue in showing MVC in backbone.js
我在這里使用確切的代碼: http : //jsfiddle.net/sameersegal/NHAvS/這是主干結構,我想要做的是將它們分成三個不同的文件Model,View和Collection。 正如您在此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 not not defined”,這表明盡管已添加了該錯誤,但視圖中無法識別模型中定義的“ w”。
那么,您能告訴我缺少哪些部分才能使單獨的文件協同工作嗎?
您在視圖中缺少定義。
您的密碼
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
的模板,那么您就很好了,否則您需要將其更改為正確的模板。
錯誤在這一行:
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();
我在您的模型中看到一個問題。 您定義了變量( datapoint ),但返回值是DatapointModel 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.