从骨干j开始并且已经遇到了麻烦。
这是我的HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Backbone training</title>
<script src="jquery-1.11.2.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<style type="text/css">
.rectangle{
position: absolute;
border: 4px solid #000000;
}
</style>
</head>
<body>
<h1>Rectangles</h1>
<div id="canvas"></div>
</body>
<script type="text/javascript" src="rectangles.js"></script>
</html>
这是rectangles.js文件内容:
(function () {
var Rectangle = Backbone.Model.extend({});
var RectangleView = Backbone.View.extend({
tagName: 'div',
className: 'rectangle',
render: function() {
this.setDimensions();
this.setPostion();
return this;
},
setDimensions: function() {
this.$el.css({
width: this.model.get('width') + 'px',
height: this.model.get('height') + 'px'
});
},
setPostion: function() {
var position = this.model.get('position');
this.$el.css({
left: position.x,
top: position.y
});
}
});
var myRectangle = new Rectangle({
width: 100,
height: 60,
position: {
x: 300,
y: 150
}
});
var myView = new RectangleView({model: 'myRectangle'});
$('div#canvas').append(myView.render().el);
})();
运行后,我收到此错误: TypeError:this.model.get不是函数 因为它是教程材料,我认为它应该没问题,至少对于视频中的人来说是可以的。以为我错过了一些东西,所以试图重写几次而没有运气。作为骨干的新手我不知道哪里出错了?
非常感谢任何链接或建议。提前谢谢。
答案 0 :(得分:2)
您需要将模型的实例传递到视图中,此处:
var myView = new RectangleView({model: 'myRectangle'});
应该成为:
var myView = new RectangleView({model: myRectangle});
仅仅将名称作为字符串传递是不够的,Backbone不知道您为new Rectangle
分配了什么变量或者它应该寻找什么。
您可能还想修改render
方法;我相信传统的Backbone方法是在构造时使视图采用元素(el
或$el
),然后在调用render时渲染到该元素(而不是生成新元素并返回这一点)。