Пример Backbone.js, JAX-RS, JPA-приложение

Модели содержат данные и определяют методы, связанные с данными. Вы расширяете  Backbone.Model  с помощью методов, специфичных для вашего домена, а  Model  предоставляет базовый набор функций для управления изменениями.

Вот исходный код для Item.js:

var ItemModel = Backbone.Model.extend({
  urlRoot: "resources/items",

  defaults: {
  id: null,
  name: "",
  description:"",
  }

});

Коллекции — это упорядоченные наборы моделей, которые синхронизируются с сервером. Коллекции могут инициировать события, которые будут уведомлены, когда любая модель в коллекции будет изменена, добавлена, удалена или получена с сервера.

Вот исходный код для Items Collection Items.js:

var ItemList = Backbone.Collection.extend({
  model: ItemModel,
  url: "resources/items",
 }
});

var Items = new ItemList();

Свойство  модели  определяет класс модели, который содержит коллекция.

Свойство  url  (или функция) в коллекции ссылается на ее расположение на сервере.

Backbone.sync — это функция, которую Backbone вызывает каждый раз, когда пытается прочитать или сохранить модель на сервере. По умолчанию он использует (jQuery / Zepto) .ajax для выполнения запроса RESTful JSON.  Обработчик синхронизации по умолчанию  отображает запросы Fetch, Save, Destroy CRUD в REST, используя URL-адрес коллекции:

• Сохранить (новое)  →  создать → HTTP POST   / url
• Выбрать  →  прочитать → GET   / url / id
• Сохранить →  обновить → PUT  / url / id
• Уничтожить →  удалить → УДАЛИТЬ  / URL / ID

Вид

• Представление привязано к модели / коллекции
• Манипулирует данными модели в DOM
• Делегаты DOM событий
• Функция Render использует данные модели для визуализации шаблона.

С помощью представления Backbone вы можете связать функцию рендеринга вашего представления с событием «изменения» модели, тогда везде, где данные модели отображаются в пользовательском интерфейсе, они будут обновляться.

Вот исходный код для Item View ItemView.js:

window.ItemView = Backbone.View.extend({
    initialize: function () {
        this.render();
    },
    render: function () {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },
    events: {
        "change"        : "change",
        "click .save"   : "beforeSave",
        "click .delete" : "deleteItem"
    },
});

В представлении вы переопределяете функцию рендеринга, указываете события и в этом примере указываете шаблон. В приведенном выше коде функция initialize связывает представление с событиями изменения своей модели, которые вызывают функцию рендеринга при возникновении события. Функция  рендеринга   визуализирует шаблон представления из данных модели и обновляет this.el новым HTML.

Это представление отображает данные модели в HTML, используя шаблонизатор.

  <script type="text/template" id="item-template">
  <h3>Name: {{name}}</h3>
  <p>{{description}}</p>
  </script>

• Атрибуты модели: {«name»: «Sneaky Cat», «Description»: «my cat is soney» «}
• Метод рендеринга: this. $ El.html (this.template (this.model.toJSON ()));
• Вывод шаблона: <h3> Имя: подлый кот </ h3> <p> мой кот такой подлый </ p>

Таблица базы данных элементов каталога

Элементы каталога содержатся в таблице базы данных:

• Элемент содержит заголовок и текст для каждого элемента в каталоге.

CREATE TABLE item (
 id INT NOT NULL,
 productid VARCHAR(10) ,
 name VARCHAR(30) ,
 description VARCHAR(500) ,
 imageurl VARCHAR(155),
 imagethumburl VARCHAR(155),
 price DECIMAL(14,2) ,
 primary key (id)
);

   package model;

   ...

   @Entity
   @Table(name = "item")
   @XmlRootElement

   public class Item implements Serializable {
       @Id
       private Integer id;
       private String description;
       ...

       //getters and setters
       ...

@Stateless
@Path("/items")
public class ItemFacadeREST extends AbstractFacade<Item> {
  @PersistenceContext(unitName = "itemPU")
  private EntityManager em;

   @GET
  @Produces({"application/xml", "application/json"})
  public List<Item> findAll() {
    CriteriaQuery cq = getEntityManager().getCriteriaBuilder().createQuery();
  cq.select(cq.from(Item.class));
  return getEntityManager().createQuery(cq).getResultList();
  }

Request: GET  http://localhost:8080/blog/resources/items/1?

 {"id":1,
"productid":"feline01",
"name":"Friendly Cat",
"description":"This black and white colored cat is super friendly. Anyone passing by your front yard will find him puring at their feet and trying to make a new friend. His name is Anthony, but I call him Ant as a nickname since he loves to eat ants and other insects.",
"imageurl":"anthony.jpg",
"imagethumburl":"anthony-s.jpg",
"price":307.10}