javascript - Backbonejs 何时初始化集合

Question

我正在使用 Rails 3.1 mongodb 和 backbonejs 构建小型单页应用程序。

我有两个可通过 json api 获得的资源。我在 backbone 中创建了两个模型和集合，看起来像这样

https://gist.github.com/1522131

我还有两个独立的路由器

项目路由器 - https://gist.github.com/1522134笔记路由器 - https://gist.github.com/1522137

我用来自 github 的 backbonejs-rails gem 生成了它们，所以里面的代码只是模板。我在 index.haml 文件中初始化我的基本路由器

#projects

:javascript
  $(function() {
    window.router = new JsonApi.Routers.ProjectsRouter({projects: #{@projects.to_json.html_safe}});

    new JsonApi.Routers.NotesRouter();

    Backbone.history.start();
  });

我不想在应用程序启动时获取笔记，因为用户很可能永远不会查看笔记内部。所以没有充分的理由在开始时获取它。在 NotesRouter 内部的所有操作中，我都依赖于 @notes 变量，但没有 .fetch() 方法，该变量为空。我也应该可以从 url 中复制笔记 View ，比如

/1/笔记/5

项目编号 = 1注意_id = 5

backbonejs 中解决此类问题的最佳实践是什么？

Answer 1

为什么不在请求时延迟加载笔记？这是一个例子:

var State = Backbone.Model.extend({
    defaults: {
        ready: false,
        error: null
    }
});

var Note = Backbone.Model.extend({
    initialize: function () {
        this.state = new State();
    }
});

var Notes = Backbone.Collection.extend({
    model: Note,

    initialize: function () {
        this.state = new State();
    }
});

var NoteCache = Backbone.Model.extend({

    initialize: function () {
        this._loading = false;
        this._loaded = false;
        this._list = new Notes();
    },

    _createDeferred: function (id) {
        var note = new Note({ id: id });
        this._list.add(note);
        this._load();
        return note;
    },

    getNote: function (id) {
        return this._list.get(id) || this._createDeferred(id);
    },

    getNotes: function () {
        if (!this._loaded)
            this._load();

        return this._list;
    },

    _load: function () {

        var that = this;

        if (!this._loading) {

            this._list.state.set({ ready: false, error: null });

            this._loading = true;

            $.ajax({
                url: '/api/notes',
                dataType: 'json',
                cache: false,
                type: 'GET',
                success: function (response, textStatus, jqXHR) {

                    _.each(response.notes, function (note) {

                        var n = that._list.get(note.id);
                        if (n) {
                            n.set(note);
                        } else {
                            that._list.add(note, { silent: true });
                            n = that._list.get(note.id);
                        }
                        n.state.set({ ready: true, error: null });
                    });

                    that._list.state.set({ ready: true, error: null });
                    that._list.trigger('reset', that._list);
                    that._loaded = true;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    that._list.state.set({ error: 'Error retrieving notes.' });
                    that._list.each(function (note) {
                        note.state.set({ error: 'Error retrieving note.' });
                    });
                },
                complete: function (jqXHR, textStatus) {
                    that._loading = false;
                }
            });
        }
    }
});

在这个例子中，我定义了一个 NoteCache 对象来管理延迟加载。我还向 Note 模型和 Notes 集合添加了一个“state”属性。

你可能想在某个地方(可能在你的路由内)初始化 NoteCache，每当你想要一个或多个笔记时，只需这样做:

var note = noteCache.getNote(5);
var notes = noteCache.getNotes();

现在在您的 View 中，您需要监听状态变化，以防笔记尚未加载:

var NoteView = Backbone.View.extend({
  initialize: function(){
    this.note.state.bind('change', this.render, this);
  },
  render: function(){
     if (this.note.state.get('error') {
       // todo: show error message
       return this;
     }

     if (!this.note.state.get('ready') {
       // todo: show loader animation
       return this;
     }

     // todo: render view
     return this;
  }
});

我还没有测试过这个，所以可能会有一些错误，但我希望你能理解。