使用來自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