使用来自API端点的响应填充BackboneJS模型

Question

我是BackboneJS的新手，但我正在尽我所能去学习它。我对AngularJS更加熟悉，所以我在BackboneJS中有一些困惑，但肯定也想成为一名BackboneJS开发专家。

回到我以前的工作，我是前端开发人员，我会与Java开发人员一起工作。我们将会有一个关于JSON响应如何的会议。基本上，我会对其中一个端点进行REST调用（使用Restangular或$ http），然后我会得到响应。 JSON响应将被分配给一个范围变量，例如$ scope.bookCollection。在我的模板中，我将使用ng-repeat来显示它。

现在与BackboneJS，我想正确地做到这一点。我今天看到BackboneJS Model是一个容器。我想要发生的是，在进行fetch（）之后，我希望将JSON响应放入我定义的模型中。这是如何完成的？

我找到了一个例子jsfiddle，但我认为这是一个非常糟糕的例子。我现在找不到有用的东西，一些数据很好的东西。

require.config({ 
    paths: { 
     jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min', 
     underscore: 'http://underscorejs.org/underscore', 
     backbone: 'http://backbonejs.org/backbone-min' 
    }, 
    shim: { 
     backbone: { 
      deps: ["underscore", "jquery"], 
      exports: "Backbone" 
     }, 

     underscore: { 
      exports: "_" 
     } 
    } 
}); 
require([ 
    'jquery', 
    'underscore', 
    'backbone'], function ($, _, Backbone) { 
    var UserModel = Backbone.Model.extend({ 
     urlRoot: '/echo/json/', 
     defaults: { 
      name: '', 
      email: '' 
     } 
    }); 
    var userDetails = { 
     name: 'Nelio', 
     email: 'nelio@angelfire.com' 
    }; 
    var user = new UserModel(userDetails); 

    user.fetch({ 
     success: function (user) { 
      console.log(user.toJSON()); 
     } 
    }); 
}); 

这里是的jsfiddle： http://jsfiddle.net/20qbco46/

Answer 1

我想放在JSON响应在我定义的模型。 如何完成？

如果你想呈现来自您模型中的数据，你会使用这个view：

首先，创建一个view渲染你的数据：

// Create a new view class which will render you model 
var BookView = Backbone.View.extend({ 
    // Use underscores templating 
    template: _.template('<strong><%= title %></strong> - <%= author %>'), 
    initialize: function() { 
     // Render the view on initialization 
     this.render(); 
     // Update the view when the model is changed 
     this.listenTo(this.model, "change", this.render); 
    }, 
    render: function() { 
     // Render your model data using your template 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 

参见：template和toJSON以及$el

---

接下来，创建一个Model：

// Create a model class 
var Book = Backbone.Model.extend({ 
    urlRoot: '/echo/json/', 
    defaults: { 
     title : '', 
     author: '' 
    }, 
}); 

您的模型将举行从url/urlRoot

获取的数据可以使用set如果你正在尝试新的属性添加到您的模型。

您可以使用get从模型中获取属性。

另请参阅 - save和destroy。

---

然后，实例化模型：

// Some dummy data 
var instance = { 
    title: 'learn Backbone JS', 
    author: 'Bobby Longsocks', 
}; 

// Instansite your model 
var model = new Book(instance); 

最后，fetch您的模型数据，并创建你的新实例查看：

// Fetch your model 
model.fetch({ 
    success: function(book) { 
     // Instansite your view, passing in your model 
     var view = new BookView({model: book, el: $('body')}); 
    } 
}); 

这里是一个Example可以拨弄用。

还有一些进一步阅读：Annotated Source