关于Backbone.js：Backbone 视图正在侦听模型，而不是在更改或重置时触发？


Backbone view listening to model, not firing on change or reset?

我正在使用一种模型来使用POST从服务中获取位置数据。
但是，当它最终收到响应时，我正在努力让视图去监听该模型。

请注意，我已经重写了一些模型方法以适合我正在使用的服务。

型号代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
        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;

    });

在视图初始化程序中，我尝试了以下绑定并在模型上进行侦听，但是它们似乎在响应后不会触发。

查看代码

1
2
3
4
5
6
7
8
9
10
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 源，第578行。

您的代码现在应如下所示：

查看代码

1
2
3
4
5
6
7
8
model : new LocationModel(),

    initialize: function ()
{
    console.log("Filter View - Initialize");
    this.render();
    this.listenTo(this.model,"sync", this.render);
},

这是一个小提琴，用于显示您的代码正常工作。我使用httpbin模拟了POST请求。您还可以立即在获取请求中删除async: false参数：)(我在小提琴示例中已将其删除)。