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>

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
});