Question

我有一个骨干应用程序和一个RESTful api。我使用Coenraets创建的示例来理解骨干应用程序的体系结构，但我决定设置自己的结构并只使用数据进行测试。

我想知道从RESTful api返回数据的最佳方法。我目前的app文件夹结构设置有模型，集合，视图和服务文件夹。我有一个运行Express的节点服务器处理后端并且工作正常。

我想知道的是访问restful数据api的最佳做法是什么？我应该在服务类或视图类中执行此操作吗？如何使用restful api中返回的数据动态地完成此工作：http://localhost:3000/employees

似乎有很多方法可以做到这一点，现在我只想要一些有效的方法，但最终我想知道最好的方法是什么。最终我想要一个CRUD设置。但我不确定应该在哪里设置。与此处详述的内容类似：http://www.codeproject.com/Articles/797899/BackBone-Tutorial-Part-CRUD-Operations-on-Backbone

我的文件如下：

employeecolletion.js

var Backbone = require('backbone');
var Employee = require('../models/employeemodel.js');

module.exports = Backbone.Collection.extend({
    model: Employee,
    url:"http://localhost:3000/employees"
});

employeemodel.js

var Backbone = require('backbone');
var EmployeeCollection = require('../collections/employeecollection.js');

module.exports = Backbone.Model.extend({

    urlRoot:"http://localhost:3000/employees" 

    // initialize:function () {
    //     this.reports = new EmployeeCollection();
    //     //this.reports.url = this.urlRoot + "/" + 1 + "/reports";

    // }

});

employee.js（绑定到我的模板的员工视图）

var fs = require('fs');
var base = require('./base.js');
var EmployeeList = require('../collections/employeecollection.js');
var employeeService = require('../services/employeeService.js');
var template = fs.readFileSync('app/templates/employee.mu', { encoding: 'utf8' });


module.exports = base.extend({
  el: '.view',
  template:template,
  collection: employeeService.collection,

  initialize: function () {
    this.viewModel = {
      employee_list: this.collection.toJSON()
      //employee_list: this.collection.fetch() --HERE I EXPERIMENTED WITH FETCHING THE DATA
    };
    this.render();
  }
});

employeeservice.js（服务文件夹中的文件，理想情况下会返回我将在员工视图文件中绑定到我的模板的集合）

var EmployeeCollection = require('../collections/employeecollection.js');

//if wanting to pass in data manually
var employee_list = [
    {
        id:1,
        firstName:"James",
        lastName:"King",
        fullName:"James King",
        managerId:0,
        managerName:"",
        title:"President and CEO",
        department:"Corporate",
        cellPhone:"617-000-0001",
        officePhone:"781-000-0001",
        email:"jking@fakemail.com",
        city:"Boston, MA",
        pic:"james_king.jpg",
        twitterId:"@fakejking",
        blog:"http://coenraets.org"
    }
];

//HERE I WAS EXPERIMENTING WITH A DIFFERENT SYNTAX TO DO THE FILTERING BY ID
//IN MY SERVICE AND SIMPLY RETURNING THE FINAL DATA I WANT TO MY VIEW CLASS

// var employees = new EmployeeCollection({id: id});

//  employees.fetch({
//      success: function (data) {
//          console.log(data);
//      }
//  });


module.exports = {
  collection: new EmployeeCollection(employee_list)
};

Answer 1

Backbone适用于RESTful服务。

我将尝试使用一些易于理解的术语来解释基础知识。

因此骨干基于模型和视图。

模型负责数据。这意味着，该模型是从服务器获取数据并存储它的人。在交互式应用程序中，模型应具有url或urlRoot属性，这些属性指示此模型引用的特定资源的URL。例如，如果我们有一个Person资源，并假设我们正在使用标准的RESTfult服务，我会期待类似的东西：

var Person = Backbone.Model.extend({
    url :   'http://localhost:3000/api/Person'
});

实际上，我们可以创建此模型的新实例并对其进行操作。该模型将使用此URL来处理与其相关的所有CRUD操作。

例如，如果我们现在创建一个新实例：

var person = new Person();

我们现在有以下基本的CRUD操作：

fetch ：此方法在幕后执行异步AJAX GET请求，并将数据注入模型。现在，在我们获取数据之后，我们可以通过简单地调用get来使用它： person.get('name'); *假设有name属性。

保存此方法正在异地播放场景后面的异步AJAX POST或PUT请求。如果模型的idAttribute未定义，则会执行POST，否则为PUT。 idAttribute是一个模型属性，它指示模型的唯一ID。

示例用法：

person.set({name : 'Mor'});
person.save();

abvoe将在请求正文中执行name: 'Mor'的发布请求。例如，如果我获取了模型，并且已经分配了idAttribute，则调用相同的save方法将使用PUT请求。

destroy 此方法将在场景后面执行DELETE请求。示例用法：person.destroy();。

显然我刚刚向您展示了基本的用法，那里有更多的选择。

集合只是一个模型列表，因此无需解释，您可以在此处阅读更多内容：http://backbonejs.org/#Collection

您看到的是视图。它是应用程序的可视部分。 Backbone让我们做的是将视图绑定到模型和集合。通过这种方式，我们可以创建一些动态内容和视觉效果。

基本视图会像这样：

var PersonView = Backbone.View.extend({
  el: '.person',
    initialize: function(){
    this.listenTo(this.model, "change", this.render);
  },
  render: function(){
    this.$el.html("hello :"+this.model.get("name"));
  }
});

如您所见，我使用了listenTo。它是一个事件监听器，每次模型更改时都会调用render。当我引用this.model时，我会引用一个模型，当我启动它时，我将传递给视图：

var view = new View({ model : person});

由此，自从我使用listenTo后，我的视图现已与person模型绑定。

基本上就是这样。显然，学习和理解还有很多很多，但这几乎涵盖了基础知识。

请参阅http://backbonejs.org/并阅读更多信息。

使用主干

1 个答案: