如何在 Backbone JS 中渲染 json 获取？

Question

我是 BackboneJS 的新手，我无法从 JSONP 呈现信息。如果我将数据放入 data.json 并获取它，则计数会出现在控制台中，但是当我使用 JSONP 时永远不会重新渲染。 我不知道获取数据是否存在某种延迟，但是集合没有触发“更改”和“重置”事件以重新渲染视图。 我的代码是下一个：

// 收藏

define([
'underscore',
'backbone',
'models/EstablecimientoModel'],function(_, Backbone, EstablecimientoModel){

var EstablecimientoCollection = Backbone.Collection.extend({
    model: EstablecimientoModel,

    initialize: function(models, options) {
        console.log("Establecimiento initialize");
    },

    url: function() {
        return '../js/establecimientos.json';  
        //return 'http://localhost:3000/establecimiento';
    },

    parse: function(data) {
        console.log("End of loading data " + JSON.stringify(data) + " datos");
        return data;   
    },
});

return EstablecimientoCollection;

});

// 路由器

define([
    'jquery',
    'underscore',
    'backbone',
    'views/establecimiento/EstablecimientoView',
    'jqm'
], function($, _, Backbone,EstablecimientoView) {
    'use strict';
    var Router = Backbone.Router.extend({
        //definition of routes
        routes: {
            'nearMe' : 'nearMe',
        },
        nearMe: function(actions) {
            var estaColl = new EstablecimientoCollection();

            var establecimientoView = new EstablecimientoView({ collection: estaColl });
            //estaColl.fetch();
            //establecimientoView.render();
            this.changePage(establecimientoView);
        },
        init: true,
        changePage: function(view) {
            //add the attribute data-role="page" for each view's div
            $(view.el).attr('data-role','page');
            view.render();
            // append to the DOM
            $('body').append($(view.el));
            var transition  = $.mobile.defaultPageTransition;

            if(this.firstPage) {
                transition = 'none';
                this.firstPage = false;
            }

            // Remove page from DOM when it’s being replaced 
            $('div[data-role="page"]').on('pagehide', function (event, ui) { 
                $(this).remove();
            });

            $.mobile.changePage($(view.el), { transition: transition, changeHash: false });   

        } // end of changePage()
    });

    return Router;
});

// 查看

define([
    'jquery',
    'underscore',
    'backbone',
    'collections/EstablecimientoCollection',
    'text!templates/establecimiento/establecimientoTemplate.html'
],function($, _, Backbone, EstablecimientoCollection, establecimientoTemplate) {

    var EstablecimientoView = Backbone.View.extend({
        initialize: function() {
            var self = this;

            _.bindAll(this,"render");
            this.collection.on("change",self.render);
            this.collection.fetch({ dataType: 'jsonp', success: function(){ self.render() }});

        }, //end of initialize()

        template: _.template(establecimientoTemplate),        

        render: function(eventName) {
            console.log("render");
            console.log(this.collection.length);

            return this;
        }, //end of render()
    });

    return EstablecimientoView;
});

Answer 1

当您获取数据时，请确保为您的 fetch 调用设置 dataType。 Fetch 包装了一个 jQuery/Zepto ajax 调用，因此您需要设置与这些参数相同的参数。

this.collection.fetch({
    reset: true,
    dataType: 'jsonp',
    success: function () {
        // do stuff
    }
});

另外，我会让你的视图监听集合发布的事件，而不是直接从 fetch 的成功回调中调用视图的渲染。