Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

This library is inspired by the Backbone.js project, but without the annoying `extend` and Undercore.js (yep, I do hate both).

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 examples
Octocat-spinner-32 lib
Octocat-spinner-32 spec
Octocat-spinner-32 vendor
Octocat-spinner-32 .gitignore
Octocat-spinner-32 CHANGELOG
Octocat-spinner-32 LICENSE-MIT
Octocat-spinner-32 README.md
Octocat-spinner-32 Rakefile
Octocat-spinner-32 VERSION
Octocat-spinner-32 kiddo.html
Octocat-spinner-32 kiddo.js
Octocat-spinner-32 kiddo.min.js
README.md

Kiddo.js

This library is inspired by the Backbone.js project, but without the annoying extend and Undercore.js (yep, I do hate both).

Usage

Models

All models are defined through the Kiddo.Model function.

var Task = Model();

If you want to perform some initialization like setting default values or binding events, just pass a function.

var Task = Model(function(){
  this.status = "pending";
});

Once your model is defined you can instantiate it.

var task = new Task({
  status: "done",
  title: "Deploy application"
});

To access models attributes, use the Kiddo.Model.fn.get function. This will return the attribute's value.

task.get("status"); // "done"
task.get("title");  // "Deploy application"

Your model can have computed attributes. Just pass an attribute name that points to a function.

task.statusLabel = function() {
  return {pending: "Pending", done: "Done"}[this.status];
};

task.get("statusLabel");  // "Done"

You can still access attributes directly, but in this case computed attributes need to be manually executed.

task.status;      // "done"
task.statusLabel; // [Function]

To set attributes, use the Kiddo.Model.fn.set function.

task.set("status", "pending");

Every time an attribute is set with a different value, two different events are triggered. To bind to these events, use the Kiddo.Model.fn.on function.

// The "change" event is triggered every time any attribute is changed.
//
task.on("change", function(actual, attr, previous){
  console.log(attr + " attribute was changed from " + previous + " to " + actual);
});

// The "change:status" event is triggered whenever the status attribute changes.
//
task.on("change:status", function(status){
  console.log("status has been changed to", status);
});

The this event handler's context is the model instance itself, but you can define it to whatever you want by providing a third argument.

task.on("change", callback, context);

To force an event (recognized by the model, or a custom one), use the Kiddo.Model.fn.emit function. Any argument other than the event name will be proxied to the callback.

task.on("some:event", function(n1, n2, n3){
  console.log("n1 is ", n1);
  console.log("n2 is ", n2);
  console.log("n3 is ", n3);
});

task.emit("some:event", 1, 2, 3);

To set an attribute will triggering events, just access the attribute directly.

task.status = "pending";

You can retrieve attributes with the Kiddo.Model.fn.attributes function. Note that some attributes are ignored:

  • computed attributes
  • private attributes (starts with _)
  • attributes added through the prototype
task.attributes(); // {status: "pending", title: "Deploy application"}

Finally, to check if your attribute is a value other than undefined, null or false, use the Kiddo.Model.fn.is function, or its alias, Kiddo.Model.fn.has. Note that empty strings/arrays will return true. These functions also work with computed attributes.

task.value = [];
task.value == false   // true
task.has("value");    // true
task.is("value");     // true

task.value = "";
task.value == false   // true
task.has("value");    // true
task.is("value");     // true

task.value = false;
task.value == false   // true
task.has("value");    // false
task.is("value");     // false

task.value = "Hello";
task.value == false   // false
task.has("value");    // true
task.is("value");     // true

Views

Views are essentially the counter-part of Models. You can bind events and update the HTML representation every time an attribute is updated.

var TaskView = Kiddo.View("task");

The "task" value is the template name, which must be present in your DOM.

<script type="text/handlebars" data-name="task">
  <li class="task {{status}}">
    <strong>{{title}}</strong>

    {#isPending}
      <input type="button" class="done button" value="done">
    {/isPending}
  </li>
</script>

Once your view is defined, you can bind events to it. This can be easily done by using the Kiddo.View.fn.on function.

var TaskView = Kiddo.View("task", function(){
  this
    .on("click", ":button", "markAsDone")
  ;
});

TaskView.fn.markAsDone = function() {
  // here you can set the status attribute
  // or event better, call a function that will
  // encapsulate such logic.
  this.model.markAsDone();
};

TODO

License

Copyright (c) 2012 Nando Vieira, http://nandovieira.com.br/

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Something went wrong with that request. Please try again.