Заполнение модели BackboneJS ответом от конечной точки API

0

Я новичок в BackboneJS, но я делаю все возможное, чтобы изучить его. Я больше знаком с AngularJS, поэтому у меня есть некоторая путаница в BackboneJS, но я определенно хочу стать экспертом BackboneJS.

Вернувшись к моей предыдущей работе, я был разработчиком frontend, и я бы работал с парнем Java dev. У нас было бы совещание о том, как будет выглядеть ответ JSON. В принципе, я сделаю вызов REST (либо с Restangular, либо $ http) на одну из своих конечных точек, и я получу ответ. Ответ JSON будет присвоен переменной области видимости, такой как $ scope.bookCollection. В моем шаблоне я просто использую ng-repeat, чтобы отобразить его.

Теперь с BackboneJS я бы хотел сделать это правильно. Сегодня я читаю, что модель BackboneJS является контейнером. Я бы хотел, чтобы после выполнения 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: '[email protected]'
    };
    var user = new UserModel(userDetails);

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

Вот jsfiddle: http://jsfiddle.net/20qbco46/

  • 2
    Похоже, вы создали модель, вы вызываете метод fetch ... модель будет обновлена данными, возвращенными из службы ... Почему вы считаете этот пример плохим? .. У вас есть конкретные проблемы ..?
  • 0
    Я думаю, что это не хороший пример, потому что я не вижу код, который будет присваивать возвращаемые значения свойствам модели. Я надеялся увидеть this.name = response.name. Однако вы сказали, что модель будет обновлена. Как это произойдет? Будет ли BackboneJS автоматически делать это для нас?
Показать ещё 1 комментарий
Теги:
backbone.js

1 ответ

1
Лучший ответ

Я хочу, чтобы ответ JSON был помещен в модель, которую я определил. Как это делается?

Если вы пытаетесь отобразить данные из вас модели, вы будете использовать 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

Затем создайте модель:

// 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 your model
model.fetch({
    success: function(book) {
        // Instansite your view, passing in your model
        var view = new BookView({model: book, el: $('body')});
    }
});

Вот пример, с которым вы можете играть.

И некоторые дополнительные чтения: Аннотированный источник

Поделиться
  • 1
    Спасибо вам большое! Я буду играть с этим!
  • 0
    Хорошо, после того, как я поиграл так много раз, я думаю, что это не тот, который я искал. То, что я действительно искал, было похоже на создание GET из конечной точки URL, которая возвращает объект json. Однако можно ли извлечь fetch () из файла .json, чтобы мы могли смоделировать реальный запрос метода GET?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню