javascript - 模型中的主干集合 + 使用 Node.js 的 restful 服务器设计

Question

我正在尝试使用 Backbone 为客户端和 Node.js 为服务器开发一个简单的文件浏览器。目前，当涉及到子文件夹时，我非常纠结于如何设计模型

客户端代码看起来像

app.MyFile = Backbone.Model.extend({
    defaults: {
        path: '', // id of the model will be the path + filename
        content: '', // content of the file
        isDir: false // if file is a directory
    }
});

var MyFileList = Backbone.Collection.extend({
  model: app.MyFile,
  url: '/api/files'
});

// create global collection of files
app.MyFiles = new MyFileList();

// displays file name
var MyFileItemView = Backbone.View.extend({
    events: {
      'click .clickable': 'view'
    },

    ...

    view: function (source) {
        if (this.model.toJSON().isDir) {
            this.model.fetch();
            // XXX what to do here

            _.each(this.model.get('content'), function (obj) {
               console.log(obj.toJSON()); // error - no toJSON method
            });

        } else {
            // calls another view that calls the model.fetch 
            // to display the content (no issue here)

        }
    },
});


var MyFilesListView = Backbone.View.extend({
    initialize: function () {
      // XXX Not sure if I should listen on MyFiles collection...
      app.MyFiles.on('reset', this.render, this);
    },

    render: function () {
      app.MyFiles.each(function (file) {
        new MyFileItemView({model:file});
      }, this);

});

app.AppView = Backbone.View.extend({
  initialize: function () {
    // fetch all files
    app.MyFileList.fetch();
  }
});

// app.js (point of entry)
$(function() {
  // Kick things off by creating the **App**.
  new app.AppView();
});

我的服务器代码：

var express = require("express"), 

...

app.get('/api/files', function(req, res) {
    ...
    // return file list (including folder - no issue here)
}

app.get('/api/files/:id', function(req, res) {
    var fileModel = createFileModel(req.params.id); // create file model

    if (!fileModel.isDir) {
        // if file is not directory, then simply read the content and return
        // it back to the client -- no issue
        ...
    } else {
        var files = [];
        // read the directory to find all the files and push it to 
        // files array
        ...

        fileModel.content = files;
        res.send(fileModel);
    }
}

目前我不确定这样做的正确方法是什么。我的问题：

如何表示模型对象本身。如果我应该将内容设置为 MyFile 的集合isDir===true吗？如果是这种情况，我该怎么做？调用toJSON()模型的内容会引发异常，因为toJSON未定义
还有关于它是否也MyFilesListView应该听全局集合？现在我需要处理子文件夹，这似乎不对。
或者我应该在尝试查看子文件夹时覆盖全局集合？
我的服务器代码实现是否正确？我现在遇到的问题是，当我将内容放入数组并将 fileModel 发送回客户端时，文件列表不会反映在模型本身中 - 也许我必须覆盖parse？

我在这里读了一些帖子

但我仍然不确定如何应用它...... Javascript令人困惑:(

score 1 · Accepted Answer

您可以在单个模型中使用像这样的简单函数在模型中编写一个简单模型（您可以调用它的 xfile 模型！）：

  loadFolders : function() {
    if (this.get('isDir')) {
      var self = this;
      self.subFolders = [];
      _.each(self.get('files'), function(data) {
        file = new File(data);
        self.subFolders.push(file);
      });
    }
  }

并在您的视图模型中执行相同操作以呈现正确的树视图。

在您的 express.js 后端（我不熟悉该框架）中，您只需将正确的 json 发送到您的骨干模型。

如果您的数据太长并且您想分别获取每个模型目录（当用户在您的视图中展开文件夹时），您可以使用相同的想法创建具有大量集合（或具有大量集合的集合）的模型，然后从模型中的服务器，后端必须支持目录，如下所示：/api/file/folder1/folder2/file1.txt

另一种更神奇的方法是使用关系模型（通过任何提供此类功能的主干扩展）

如果您想了解更多关于：

做同样事情的 marionette.js 示例

Backbone.Relational - bakcbone 的关系扩展

PS：我无法提供更多链接，所以你可以搜索 Backbone.associate，这是骨干网的另一个关系扩展

PS 2：您可以使用 coffeescript，它使 javascript 语法更简单、更易读。

javascript - 模型中的主干集合 + 使用 Node.js 的 restful 服务器设计

1 回答 1

Related

Reference