backbone js this.model.get 不是函数

Question

从 backbone js 开始，已经运行陷入困境。

这是我的 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 不是函数 因为是教程 material 我想应该没问题，至少视频里的人没问题。以为我错过了什么，所以尝试重写几次但没有成功。作为 backbone 方面的新手，我不确定我哪里出错了？

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

Answer 1

您需要将模型的实例传递到视图中，这里：

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

应该变成：

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

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

您可能还想修改您的 render 方法；我相信传统的 Backbone 方法是让视图在构造时采用一个元素（el 或 $el），然后在调用渲染时渲染到该元素（而不是生成一个新元素并返回它）。

backbone js this.model.get 不是函数

backbone js this.model.get is not a function

html

javascript

backbone.js