Backbone 查看监听模型,更改或重置时不触发?
Backbone view listening to model, not firing on change or reset?
我正在使用模型从使用 POST 的服务中获取位置数据。
但是,当它最终收到响应时,我正在努力让视图收听该模型。
请注意,我已经覆盖了一些模型方法以适应我正在使用的服务。
型号代码
define([
'underscore',
'backbone',
], function (_, Backbone)
{
'use strict';
//model class declaration
var LocationsModel = Backbone.Model.extend({
locations: null, //this attribute stores the json response
//url for http post to get location data
url: '/testserver/getLocationData',
/**
@name constructor
@method initialise
**/
initialize: function ()
{
console.log("Location Model - Initialize");
this.fetchLocationData();
},
/**
@name fetchLocationData
@method fetchLocationData
@summary retrieves bulding/location data from service, overriden fetch function to use POST
**/
fetchLocationData: function ()
{
console.log("Location Model - Fetching Building/Location data from EAS");
this.fetch({
data: JSON.stringify({ "lastRefreshedDateTime": "2015-04-01T08:18:06.000+00:00", "uid": "" }), //refactor this - string literals which are static currently
type: "POST",
contentType: "application/json",
async : false, //this is bad but it is the only way I can get it to work
at the moment
reset: true //tried adding reset parameter but no luck
});
},
/**
@name parse
@method parse
@summary parse is a method inside backbone that can be overridden, in this override we set a model attribute to the JSOn response
**/
parse: function (response, xhr)
{
console.log("Location Model - Parsing response from EAS");
this.attributes = { "true": true }; //tried adding an attribute value to trigger "change:true"
this.locations = response;
//do other stuff
},
});
return LocationsModel;
});
在视图初始化程序中,我尝试了以下绑定并在模型上监听,但它们似乎不会在响应后触发。
查看代码
model : new LocationModel(),
initialize: function ()
{
console.log("Filter View - Initialize");
this.render();
this.listenTo(this.model, 'change', this.render); //this only fires at the start when the model is initialised
this.model.on('change', this.render, this); //same as above
this.listenTo(this.model, 'reset', this.render); //not fired at all
},
对于一个系列来说,很容易听到发生的任何变化,但是对于 Backbone 个模型来说,这似乎是一个不同的球类游戏。
TLDR,如何获取视图以监听模型成功获取请求?
sync
事件是您想要listenTo
的事件。一旦 fetch
成功完成,它就会被触发。 Backbone 源中的这一行是罪魁祸首:Backbone source, line 578.
您的代码现在应该如下所示:
查看代码
model : new LocationModel(),
initialize: function ()
{
console.log("Filter View - Initialize");
this.render();
this.listenTo(this.model, "sync", this.render);
},
这里有一个 fiddle which shows your code working. I used httpbin 来模拟 POST 请求。您现在也可以删除获取请求中的 async: false
参数 :)(我已在 fiddle 示例中将其删除)。
我正在使用模型从使用 POST 的服务中获取位置数据。 但是,当它最终收到响应时,我正在努力让视图收听该模型。
请注意,我已经覆盖了一些模型方法以适应我正在使用的服务。
型号代码
define([
'underscore',
'backbone',
], function (_, Backbone)
{
'use strict';
//model class declaration
var LocationsModel = Backbone.Model.extend({
locations: null, //this attribute stores the json response
//url for http post to get location data
url: '/testserver/getLocationData',
/**
@name constructor
@method initialise
**/
initialize: function ()
{
console.log("Location Model - Initialize");
this.fetchLocationData();
},
/**
@name fetchLocationData
@method fetchLocationData
@summary retrieves bulding/location data from service, overriden fetch function to use POST
**/
fetchLocationData: function ()
{
console.log("Location Model - Fetching Building/Location data from EAS");
this.fetch({
data: JSON.stringify({ "lastRefreshedDateTime": "2015-04-01T08:18:06.000+00:00", "uid": "" }), //refactor this - string literals which are static currently
type: "POST",
contentType: "application/json",
async : false, //this is bad but it is the only way I can get it to work
at the moment
reset: true //tried adding reset parameter but no luck
});
},
/**
@name parse
@method parse
@summary parse is a method inside backbone that can be overridden, in this override we set a model attribute to the JSOn response
**/
parse: function (response, xhr)
{
console.log("Location Model - Parsing response from EAS");
this.attributes = { "true": true }; //tried adding an attribute value to trigger "change:true"
this.locations = response;
//do other stuff
},
});
return LocationsModel;
});
在视图初始化程序中,我尝试了以下绑定并在模型上监听,但它们似乎不会在响应后触发。
查看代码
model : new LocationModel(),
initialize: function ()
{
console.log("Filter View - Initialize");
this.render();
this.listenTo(this.model, 'change', this.render); //this only fires at the start when the model is initialised
this.model.on('change', this.render, this); //same as above
this.listenTo(this.model, 'reset', this.render); //not fired at all
},
对于一个系列来说,很容易听到发生的任何变化,但是对于 Backbone 个模型来说,这似乎是一个不同的球类游戏。
TLDR,如何获取视图以监听模型成功获取请求?
sync
事件是您想要listenTo
的事件。一旦 fetch
成功完成,它就会被触发。 Backbone 源中的这一行是罪魁祸首:Backbone source, line 578.
您的代码现在应该如下所示:
查看代码
model : new LocationModel(),
initialize: function ()
{
console.log("Filter View - Initialize");
this.render();
this.listenTo(this.model, "sync", this.render);
},
这里有一个 fiddle which shows your code working. I used httpbin 来模拟 POST 请求。您现在也可以删除获取请求中的 async: false
参数 :)(我已在 fiddle 示例中将其删除)。