主干视图监听模型，而不是在更改或重置时触发？答案

【问题标题】：Backbone view listening to model, not firing on change or reset?主干视图监听模型，而不是在更改或重置时触发？
【发布时间】：2015-06-11 15:15:39
【问题描述】：

我正在使用模型从使用 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，如何让视图监听模型成功获取请求？

【问题讨论】：

标签： backbone.js backbone-views backbone-events backbone-model

【解决方案1】：

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，它显示您的代码正在运行。我使用httpbin 来模拟 POST 请求。您现在也可以在 fetch 请求中删除 async: false 参数 :) （我在小提琴示例中删除了它）。

【讨论】：