Book Image

Learning JavaScriptMVC

By : Wojciech Bednarski
Book Image

Learning JavaScriptMVC

By: Wojciech Bednarski

Overview of this book

<p>JavaScriptMVC is a client-side, JavaScript framework that builds maintainable, error-free, lightweight applications as quickly as possible. As it does not depend on server components, it can be combined with any web service interface and server-side language.<br /><br />"Learning JavaScriptMVC" will guide you through all the framework aspects and show you how to build small- to mid-size well-structured and documented client-side applications you will love to work on.<br /><br />This book starts from JavaScriptMVC installation and all its components are explained with practical examples. It finishes with an example of building a web application. You will learn what the JavaScriptMVC framework is, how to install it, and how to use it efficiently.<br /><br />This book will guide you on how to build a sample application from scratch, test its codebase using unit testing, as well as test the whole application using functional testing, document it, and deploy the same. After reading Learning JavaScriptMVC you will learn how to install the framework and create a well-structured, documented and maintainable client-side application.</p>
Table of Contents (13 chapters)

$.Model


$.Model is the application data layer. It provides an easy way to connect to the services that provide RESTful APIs, listen to data changes, and bind HTML elements to models, deferrers, and validations.

$.Model is very handy; we don't need to manually write XHR calls using jQuery's Ajax method for instance. We can map our backend API using $.Model and then use its methods to pull/push data to the server.

We can organize $.Models with a list using $.Model.List, which is similar to Backbone.js's collections (http://backbonejs.org/#Collection).

Let's write some code in the file jquerymx_playground_1.js:

steal(
    'jquery/model',
    'jquery/dom/fixture',
    function ($) {
        $.Model('AccountModel', {
                findAll: 'GET /accounts',
                findOne: 'GET /accounts/{id}',
                create:  'POST /accounts',
                update:  'PUT /accounts/{id}',
                destroy: 'DELETE /accounts/{id}'
            },
            {

            }
        );
...