model.js

Javascript library to handle CRUD actions for models via ajax.

Contains a model object, generic attribute object, and many common attribute types:

  • checkbox-multiple
  • checkbox
  • date-time
  • file
  • image
  • password
  • radio
  • rich-text
  • select
  • texarea
  • textjs
  • time

Adding new attribute types is simple. Just create a new class that extends Model.Attribute and override the following methods:

  • view: Returns a viewable representation of the attribute.
  • form: Returns an editable form of the attribute.

Example of a new attribute type:


Model.Attribute.MyNewAttribute = Model.Attribute.extend({
  view: function() {
    return $('<a/>').html(this.value);
  },  
  form: function() {
    return $('<form/>').append($('<input/<').attr('type', 'text').attr('id', this.base).val(this.value));
  }
});

How to include on your site separately:


<script src="/assets/jquery.js"                            type="text/javascript"></script>
<script src="/assets/jquery-ui.js"                         type="text/javascript"></script>
<script src="/assets/class.js"                             type="text/javascript"></script>
<script src="/assets/model/model.js"                       type="text/javascript"></script>
<script src="/assets/model/attribute.js"                   type="text/javascript"></script>
<script src="/assets/model/form.js"                        type="text/javascript"></script>
<script src="/assets/model/attribute/checkbox-multiple.js" type="text/javascript"></script>
<script src="/assets/model/attribute/checkbox.js"          type="text/javascript"></script>
<script src="/assets/model/attribute/date-time.js"         type="text/javascript"></script>
<script src="/assets/model/attribute/file.js"              type="text/javascript"></script>
<script src="/assets/model/attribute/image.js"             type="text/javascript"></script>
<script src="/assets/model/attribute/password.js"          type="text/javascript"></script>
<script src="/assets/model/attribute/radio.js"             type="text/javascript"></script>
<script src="/assets/model/attribute/rich-text.js"         type="text/javascript"></script>
<script src="/assets/model/attribute/select.js"            type="text/javascript"></script>
<script src="/assets/model/attribute/texarea.js"           type="text/javascript"></script>
<script src="/assets/model/attribute/textjs.js"            type="text/javascript"></script>
<script src="/assets/model/attribute/time.js"              type="text/javascript"></script>

Example when adding a model:


<div id='user_new_container'></div>

<script type='text/javascript'>
$(document).ready(function() {
  user = new Model({
    name: 'User',
    id: 'new',
    attributes: [
      { name: 'username', type: 'text', value: '' }
    ]
  });
});
</script>

Example when editing a model:


<div id='user_27_container'></div>

<script type='text/javascript'>
$(document).ready(function() {
  user = new Model({
    name: 'User',
    id: 27,
    attributes: [
      { name: 'first_name' , type: 'text', value: "<%= @user.first_name %>" },
      { name: 'last_name'  , type: 'text', value: "<%= @user.last_name  %>" },
      { name: 'username'   , type: 'text', value: "<%= @user.username   %>" },
      { name: 'email'      , type: 'text', value: "<%= @user.email      %>" },
      { name: 'password'   , type: 'password' },
      {
        name: 'roles', 
        type: 'checkbox-multiple',  
        value: [1, 14, 18],
        text: "Managers, Clients, Assistants",
        empty_text: '[No roles]',
        multiple: true,
        loading_message: 'Getting roles...',
        options_url: '/roles/options'
      },
      {
        name: 'pic', 
        type: 'image',  
        value: '',
        update_url: '/users/27/update-pic'
      },
      {
        name: 'resume', 
        type: 'file',  
        value: '',
        update_url: '/users/27/update-resume'
      }
    ]
  });
});
</script>

Update Responses

For attributes that don't require a file upload, Model.js expects the server to respond with the following json object:


{
  success: true, // Whether or not the save was successful
  error: false,  // Any error to display to the user
  attribute: {}  // Any attribute values to set in the local attribute object
}

The File and Image attributes allow for file uploads. Since a typical ajax call can't upload files, this is done with a hidden iframe. Because of this, the response required for a file or image update is the following:


parent.Model.upload_finished({
  name: 'user',           // The name of the model
  id: 27,                 // The id of the model 
  attribute_name: 'pic',  // The name of the attribute
  success: true,          // Whether or not the save was successful
  error: false,           // Any error to display to the user
  attribute: {}           // Any attribute values to set in the local attribute object
});