在 Backbone 中模拟 JSON 响应获取？

Question

我正在学习 Backbone 并且想要 "mock" 模型中 .fetch() 调用的结果。我不想使用测试库或实际访问外部服务。

基本上我的模型中有一个设置，如果 this.options.mock === true，则只需使用内部 JSON 对象作为获取的 "result"。否则，实际上用真正的 AJAX 请求点击了 API。

但是，这似乎不起作用。当我点击实际的 API（"real" 获取）时，我的视图成功地呈现了模型数据，但每当我尝试传递虚假数据时却没有。

有没有办法在 Backbone 中伪造 Fetch 响应，而无需引入像 Sinon 这样的测试库？

这是完整的模型（至少是它的相关部分）。基本上，该模型获取数据，并将其格式化为模板。然后拥有该模型的视图将其渲染出来。

'use strict';
(function (app, $, Backbone) {

    app.Models.contentModel = Backbone.Model.extend({

        /**
         * Initializes model. Fetches data from API.
         * @param  {Object} options Configuration settings.
         */
        initialize: function (options) {
            var that = this;
            that.set({
                'template': options.template,
                'mock': options.mock || false
            });

            $.when(this.retrieveData()).then(function (data) {
                that.formatDataForTemplate(data);
            }, function () {
                console.error('failed!');
            });
        },

        retrieveData: function () {

            var that = this, deferred = $.Deferred();

            if (typeof fbs_settings !== 'undefined' && fbs_settings.preview === 'true') {
                deferred.resolve(fbs_settings.data);
            }
            else if (that.get('mock')) {
                console.info('in mock block');

                var mock = {
                  'title': 'Test Title',
                  'description': 'test description',
                  'position': 1,
                  'byline': 'Author'
                };

                deferred.resolve(mock);
            }
            else {
                // hit API like normal.
                console.info('in ajax block');
                that.fetch({
                    success: function (collection, response) {
                        deferred.resolve(response.promotedContent.contentPositions[0]);
                    },
                    error: function(collection, response) {
                        console.error('error: fetch failed for contentModel.');
                        deferred.resolve();
                    }
                });
            }
            return deferred.promise();
        },

        /**
         * Formats data on a per-template basis.
         * @return {[type]} [description]
         */
        formatDataForTemplate: function (data) {
            if (this.get('template') === 'welcomead_default') {
                this.set({
                    'title': data.title,
                    'description': data.description,
                    'byline': data.author
                });

            }
            // trigger the data formatted event for the view to render.
            this.trigger('dataFormatted');
        }
    });
})(window.app, window.jQuery, window.Backbone);

来自视图 (ContentView) 的相关位：

this.model = new app.Models.contentModel({template: this.templateName});
this.listenTo(this.model, 'dataFormatted', this.render);

是不是数据设置的太快了，监听还没设置好？

Answer 1

您可以像这样覆盖获取函数。

var MockedModel = Backbone.Model.extend({
  initialize: function(attr, options) {
    if (options.mock) {
      this.fetch = this.fakeFetch;
    }
  },
  url: 'http://someUrlThatWIllNeverBeCalled.com',
  fakeFetch: function(options) {
    var self = this
    this.set({
      'title': 'Test Title',
      'description': 'test description',
      'position': 1,
      'byline': 'Author'
    });

    if (typeof options.success === 'function') {
      options.success(self, {}, {})
    }
  }
});
var mockedModel = new MockedModel(null, {
  mock: true
})
mockedModel.fetch({
  success: function(model, xhr) {
    alert(model.get('title'));
  }
});

    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

这里的问题不在于 retrieveData 的实际实现，而在于它的调用方式。当您在返回之前解决延迟问题时，您基本上是在即时处理。这导致 formatDataForTemplate 在您的模型仍在初始化时被调用。

所以当你这样做时

this.model = new app.Models.contentModel({template: this.templateName});
this.listenTo(this.model, 'dataFormatted', this.render);

dataFormatted 事件在侦听器注册之前结束。

一个解决方案是使用超时，它只适用于

setTimeout(function() {
    deferred.resolve(mock);
});

因为这将延迟解析，直到侦听器就位时的下一轮事件循环。

另一个不涉及 setTimeout 的解决方案是在模型初始化期间不调用 retrieveData，而是让视图在附加其侦听器后调用。

this.model = new app.Models.contentModel({template: this.templateName});
this.listenTo(this.model, 'dataFormatted', this.render);
this.model.retrieveData();

我更喜欢后者，但如果这只是关于模拟数据以离线工作，我认为这并不重要。

与此无关，值得注意的是模型上初始化的实际 signature 是 new Model([attributes], [options]) 因此您的初始化可能看起来像这样

initialize: function (attributes, options) {
    var that = this;
    that.set({
        'template': options.template,
        'mock': options.mock || false
    });

只是为了可读性。这又意味着，由于您只传递一个对象，因此根本不需要调用 set。

在 Backbone 中模拟 JSON 响应获取？

mock JSON response in Backbone Fetch?

javascript

ajax

json

model

backbone.js