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