backbone js this.model.get不是一个函数

时间:2015-01-15 18:52:15

标签: javascript html backbone.js

从骨干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不是函数 因为它是教程材料,我认为它应该没问题,至少对于视频中的人来说是可以的。以为我错过了一些东西,所以试图重写几次而没有运气。作为骨干的新手我不知道哪里出错了?

非常感谢任何链接或建议。提前谢谢。

1 个答案:

答案 0 :(得分:2)

您需要将模型的实例传递到视图中,此处:

var myView = new RectangleView({model: 'myRectangle'});

应该成为:

var myView = new RectangleView({model: myRectangle});

仅仅将名称作为字符串传递是不够的,Backbone不知道您为new Rectangle分配了什么变量或者它应该寻找什么。

您可能还想修改render方法;我相信传统的Backbone方法是在构造时使视图采用元素(el$el),然后在调用render时渲染到该元素(而不是生成新元素并返回这一点)。