Items Manager

Components

Backbone collection for storing list of items
itemsManagerEditor - [jQuery-UI widget] for binding html inputs to the item
itemsManagerTable - [jQuery-UI widget] for rendering list of items

Example:

Define Backbone.Model for an item:

 var ItemModel = Backbone.Model.extend({
     defaults: {
         name : null,
         label: null,
         func: null,
         sorting: null
     }
 });

Define Backbone.Collection for the item list:

 var ItemCollection = Backbone.Collection.extend({
     model: ItemModel
 });

Define html for itemsManagerEditor:

 <div id="editor">
     <input name="name"></input>
     <input name="label"></input>
     <input name="func"></input>
     <input name="sorting"></input>
     <button class="add-button"></button>
     <button class="save-button"></button>
     <button class="cancel-button"></button>
 </div>

Define html for itemsManagerTable:

 <table>
     <thead>
         <tr>
             <th>Name</th>
             <th>Label</th>
             <th>Function</th>
             <th>Sorting</th>
             <th>Actions</th>
         </tr>
     </thead>
     <tbody class="item-container">
     </tbody>
 </table>

Define template file templates/item.html for the item on the list:

 <tr data-cid="<%= cid %>">
     <td><%= name %></td>
     <td><%= label %></td>
     <td><%= func %></td>
     <td><%= sorting %></td>
     <td class="action-cell">
         <a href="#" data-collection-action="edit" role="button" title="_.__('Edit')">
             <span class="fa-pencil-square-o hide-text" aria-hidden="true"></span>
         </a>
         <a href="#" data-collection-action="delete" role="button" title="_.__('Delete')"
             data-message="Delete?">
             <span class="fa-trash-o hide-text" aria-hidden="true"></span>
         </a>
     </td>
 </tr>

Instantiate item collection:

 var items = new ItemCollection([
     {
         "name": "a",
         "label": "A",
         // ...
     },
     {
         "name": "b",
         "label": "B",
         // ...
     },
     {
         "name": "c",
         "label": "C",
         // ...
     },
 ]);

Apply itemsManagerEditor widget on div#editor:

 $('div#editor').itemsManagerEditor({
     collection: items
 });

Apply itemsManagerTable widget to tbody.item-container:

import itemTemplate from 'tpl-loader!templates/item.html';

$('tbody.item-container').itemsManagerTable({
    itemTemplate: itemTemplate,
    collection: items
});