Backbone Fetch中的mock JSON响应
mock JSON response in Backbone Fetch?
我正在学习Backbone,并希望在模型中"模拟".fetch()
调用的结果。我不想使用测试库,也不想实际使用外部服务。
基本上,我在模型中有一个设置,如果是this.options.mock === true
,那么只使用一个内部JSON对象作为获取的"结果"。否则,实际使用真正的AJAX请求访问API。
然而,这似乎并不奏效。当我点击实际的API("真实"获取(时,我的视图成功地与模型数据一起渲染,但无论何时我尝试传递假数据时都不会。
有没有一种方法可以在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);
数据设置得太快以至于侦听器还没有设置好吗?
您可以像这样覆盖fetch函数。
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>
这里的问题不在于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();
我更喜欢后者,但如果这只是为了嘲笑数据离线工作,在我看来这并不重要。
与此无关的是,值得注意的是,模型上初始化的实际签名是new Model([attributes], [options])
,因此您的初始化可能看起来像这个
initialize: function (attributes, options) {
var that = this;
that.set({
'template': options.template,
'mock': options.mock || false
});
只是为了可读性。这再次意味着,由于只传递一个对象,因此根本不需要调用set
。
- 在不同的javascript数组中对json响应进行排序
- Laravel数据表无效的JSON响应
- 使用Backbone.js访问JSON响应的部分
- 不需要的JSON响应
- 跨多个域的json响应
- 将对Ajax PUT的json响应重定向到要由EL解析的JSP中
- handler没有为JSON响应正确填充模板
- 如何在phonegap应用程序中处理Ajax json响应
- 将JSON响应放入var中并输出
- 如何使用AngularJS将if语句conditon与json响应一起使用
- JS-通用解析JSON响应
- 将json响应格式化为父级和子级
- 从 JSON 响应解析数据
- 单个和多个 JSON 响应
- 将日期作为从 Web API 到 angularJS 的 json 响应
- 在 JSX Render for React.js 中遍历 JSON 响应
- 使用 JavaScript 从 URL 获取 JSON 响应
- 使用来自AngularJS的Web API JSON响应-错误:应为和数组,但得到了一个对象
- 生成动态json响应的Javascript
- 如何将json响应的一部分转换为map