Backbonejs 何时初始化集合

Question

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

我有两个可通过 json api 使用的资源。我在主干中创建了两个模型和集合，如下所示

https://gist.github.com/1522131

我还有两个单独的路由器

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

我用backbonejs-rails gem 生成了它们github所以里面的代码只是模板。我在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 重现笔记视图

另外我应该可以从像/1/notes/5

project_id = 1 note_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();

现在在您的视图中，您需要监听状态更改，以防注释/注释不存在。尚未加载：

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;
  }
});

我还没有对此进行测试，因此可能存在一些错误，但我希望您能理解。