骨干网未加载集合答案

【问题标题】：Backbone not loading collection骨干网未加载集合
【发布时间】：2017-07-13 03:14:34
【问题描述】：

我开始了一个新的 BackboneJS 项目，并实现了一些简单的代码。我猜它没有调用正确的函数，我没有看到任何错误，也没有看到预期的console.log 调用。

import _ from 'underscore';
import {Events} from 'backbone';
import Observables from './Models/Observables';
import ObservablesView from './Views/ObservablesView';

(function () {
    let setGlobals = function () {
        window.App = {};
        App.events = _.clone(Events);
    };

    let init = function () {
        setGlobals();

        // Get the collection from localStorage.
        let observables = new Observables();
        new ObservablesView({el: "#observables", collection: observables});

        Backbone.history.start({pushState: true});
    };

    window.addEventListener('load', init);
})();

这是我的路由器：

import {Backbone} from 'backbone';
import {Router} from 'backbone';

const FedRouter = Router.extend({
    routes: {
        '': 'index'
    },

    index: function () {
        App.events.trigger('observables');
    }
});
export default FedRouter;

这是我的看法：

import {View} from 'backbone';
import FedRouter from "../FedRouter";

/**
 * ObservablesView is the list of items we want to keep track of.
 */
const ObservablesView = View.extend({
    router: null,

    /**
     * Init a new view object.
     * @constructor
     */
    initialize: function () {
        this.router = new FedRouter();
        App.events.on('observables', this.loadObservables, this);
    },

    loadObservables: function () {
        console.log("loadObservables");
        this.collection.fetch({
            success: (collection) => console.log(collection),
            error: (collection, response) => console.log(response)
        });
    }

});

export default ObservablesView;

我的收藏：

import {Backbone} from 'backbone';
import {Collection} from 'backbone';
import Observable from './Observable';
import Store from 'backbone.localstorage';

const Observables = Collection.extend({
    model: Observable,
    localStorage: new Store('fed-observables')
});

export default Observables;

最后是我的模型：

import {Model} from 'backbone';

const Observable = Model.extend({
});
export default Observable;

那么我为什么没有看到正在记录的“loadObservables”消息。我有什么设置不正确？

【问题讨论】：

这条语句执行得好吗？ window.addEventListener('load', init);因为我觉得，加载事件绑定存在问题。另外，如果您使用 jQuery，您可以尝试使用 document.ready 执行相同的操作吗？这只是一个想法。
也许您在控制台中应用了过滤器，但无法显示正常日志。你能创建一个minimal reproducible example 来演示这个问题吗？

标签： javascript backbone.js ecmascript-6 single-page-application

【解决方案1】：

您的路由不正确，其他一切正常，这是一个有效的JSFiddle

Backbone.history.start({pushState: true, root: "_display/"});

由于 JSFiddle 上的特殊 URL 结构，这是我必须做的唯一更改。我建议你调试代码并进入这个start 函数，你可能最终会进入loadUrl 函数，在那里你可以看到正在评估的片段。

【讨论】：