Backbone Collection running a method on the `add` event getting: "TypeError: obj[implementation] is not a function"

Question

我想要的目标是让控制台记录每个 post 的标题（从我的 API 中获取）。但是我似乎做错了某事，特别是我在 this.listenTo(PostCollection, 'add', this.render); 行上得到 Uncaught TypeError: obj[implementation] is not a function——我想听 PostCollection 的任何添加并开火从 API 中获取所有 objects 的事件。这是错误堆栈：

Uncaught TypeError: obj[implementation] is not a function
_.each.Events.(anonymous function) @ backbone.js:225
Backbone.View.extend.initialize @ test.js:61
Backbone.View @ backbone.js:1001
child @ backbone.js:1566
(anonymous function) @ test.js:70
(anonymous function) @ test.js:72

API 响应：https://gist.github.com/anonymous/c270f9ca9befa054ecef

我的backbone代码：

(function ($) {
    var Post = Backbone.Model.extend({
        url: 'http://api.xxx.com/wp-json/posts',
        defaults: {
            id: null,
            status: '',
            title: ''

        }
    });

    var PostCollection = Backbone.Collection.extend({

        model: Post,
        url: 'http://api.xxx.com/wp-json/posts',
        sync: function (method, model, options) {
            return Backbone.sync(method, model, options);
        },

        parse: function (response) {

            if (response) {
                var listSource = [];
                _.each(response, function (element, index, list) {


                    listSource.push(new Post({
                        id: element.id,
                        title: element.title,
                        status: element.status

                    }));


                });
                return listSource;
            } else {
                alert('Error...');
                return [];
            }
        }


    });


    var AppView = Backbone.View.extend({
        el: '#app',


        render: function () {
            console.log(this.model.get('title'));

        },

        initialize: function () {


            this.listenTo(PostCollection, 'add', this.render);

            PostCollection.fetch();
        }

    });



    new AppView();

})(jQuery);

我的HTML:

<!doctype html>
<html lang="en" data-framework="backbonejs">
    <head>
        <meta charset="utf-8">
        <title>FOO</title>

    </head>
    <body>

        <div id="app"></div>


        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script src="node_modules/underscore/underscore.js"></script>
        <script src="node_modules/backbone/backbone.js"></script>
        <script src="js/test.js"></script>

    </body>
</html>

Answer 1

您需要实例化您的 collection。您正在尝试在 class 上进行 listenTo 和 Fetch，而您应该在 class.

的实例上这样做

 this.collection = new PostCollection();

 this.listenTo(this.collection, 'add', this.render);

 this.collection.fetch();

我无法检查你的代码，因为我没有端点，但看起来你在渲染函数中的 console.log 也不起作用。首先，您没有定义模型。我假设您想打印刚刚添加的 post 的标题。一种方法是：

 render: function () {
     console.log(this.collection.last().get('title'));
 },

Backbone Collection running a method on the `add` event getting: "TypeError: obj[implementation] is not a function"

Backbone Collection running a method on the `add` event getting: "TypeError: obj[implementation] is not a function"

javascript

backbone.js

backbone.js-collections