Представьте свой Rails CRUD браузеру с привязкой к данным

 Rails.application.routes.draw do databound :contacts end 

Как видите, мы добавили маршрут с привязкой к данным для модели контакта.

Databound сгенерирует контроллер с именем ContactsController автоматически во время выполнения, если он не найден. Для простых моделей эта функция может сэкономить время написания контроллеров для каждой модели. Здесь мы также можем указать доступные для API столбцы, например:

 databound :contacts, columns: [:name, :address, :city, :phone] 

Но мы создадим ContactsController так как мы будем изучать более сложные параметры, предоставляемые Databound, и, следовательно, будем настраивать столбцы в самом контроллере.

Давайте ContactsController со следующим кодом:

 class ContactsController < ApplicationController databound do model :contact columns :name, :address, :city, :phone end end 

Здесь мы определили model как :contact , наряду со columns , которые доступны из API здесь вместо того, чтобы делать это в rout.rb. Теперь, когда мы вызываем API, только эти указанные столбцы могут быть доступны или изменены.

Строительство фронтенда

У нас есть готовый бэкэнд. Давайте создадим простой интерфейс на основе jQuery для тестирования API. Сначала добавьте действие в наш ContactsController для отображения страницы контактов.

В app / controllers / contacts_controller.rb добавьте следующее:

 def index end 

Вам нужно добавить маршрут для этого действия в config / rout.rb :

 get 'contacts' => 'contacts#index' 

Создайте представление для действия в app / views / contacts / index.html.erb со следующим кодом:

 <h1>Contacts</h1> <table border="0"> <tr> <td colspan="2"><h3>Create Contact</h3></td> </tr> <tr> <td><strong>Name:</strong></td> <td><input name="txtName" id="txtName" /></td> </tr> <tr> <td><strong>Address:</strong></td> <td><input name="txtAddress" id="txtAddress" /></td> </tr> <tr> <td><strong>City:</strong></td> <td><input name="txtCity" id="txtCity" /></td> </tr> <tr> <td><strong>Phone:</strong></td> <td><input name="txtPhone" id="txtPhone" /></td> </tr> <tr> <td colspan="2" align="center"><button name="createContact" id="createContact">Create Contact</button></td> </tr> </table> <table border="0" id="tblContacts"> <thead> <th>Name</th> <th>Address</th> <th>City</th> <th>Phone</th> </thead> <tbody> </tbody> </table> 

Здесь мы создали простой интерфейс для создания нового контакта и отображения его в таблице ниже. Теперь мы создадим contacts.js в app / assets / javascripts, чтобы оживить представление:

 var Contact = new Databound('/contacts'); $(document).ready(function(){ $('#createContact').on('click', function() { Contact.create({ name: $('#txtName').val(), address: $('#txtAddress').val(), city: $('#txtCity').val(), phone: $('#txtPhone').val() }).then(function(new_contact) { var table = $('#tblContacts tbody'); var row = "<tr>"; row += "<td>" + new_contact.name + "</td>"; row += "<td>" + new_contact.address + "</td>"; row += "<td>" + new_contact.city + "</td>"; row += "<td>" + new_contact.phone + "</td>"; row += "</tr>"; $(table).append(row); }); }); }); 

Мы определили объект Contact Javascript, который мы будем использовать для вызова действий CRUD в модели Contact:

 var Contact = new Databound('/contacts'); 

Далее, есть простой обработчик события для кнопки createContact для вызова Contact.create , передавая данные из полей Name, Address, City и Phone. Наконец, добавьте созданную запись в таблицу.

Давайте проверим, работает ли это. Запустите сервер Rails:

 rails s 

 Contact.where({ name: 'Devdatta' }).then(function(contacts) { alert('Contacts named Devdatta'); }); 

 Contact.find(1).then(function(contact) { alert('Contact ID 1: ' + contact.name); }); 

 Contact.findBy({ name: 'Devdatta' }).then(function(contact) { alert('Contact named Devdatta from ' + contact.city); }); 

 var Contact = new Databound('/contacts', { city: 'Pune' }, { extra_where_scopes: [{ city: 'Mumbai' }] } ); 

 Contact.update({ id: 1, name: 'John' }).then(function(contact) { alert("My name has changed. I'm " + contact.name); }); 

 Contact.destroy(1).then(function(status) { if (status.success) alert('Contact deleted'); }); 

 permit(:update, :destroy) do |params, record| record.user_id == current_user.id end