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

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

1 个答案: