Home

Welcome to the js-mvp wiki!

As things grow in here this wiki will update. Currently we are at start point and rapidly changing source code, so don't use main origin if you like this lib, wait for stable tags!

Thank you, js-mvp Team

Introduction

js-mvp is application framework, if you need something for DOM manipulation please use other libraries, this is not for you. Purpose of this framework is to make life easier when you need to create robust desktop like applications. Some of you who come from Winforms world can recognize some elements in code such as dataBinding, dataSource, decorators etc. In contrary to other frameworks such as extJs or GWT, js-mvp javascript code do not emit it's own HTML and you have full control over it. There is only naming convention which you need to follow:

1. Use json always with js-mvp, later we will add XML support
2. Name your binding elements same as you would access json data as hash. Example person[address][street_name]
3. If you want to edit data, use only form elements, like input, select, etc.
4. If you need to show JSON object as readonly in view you can bind properties on any HTML element using name attribute as described above (point 2)

Minimal Example

Include libs

 <script type="text/javascript" src="javascript/jquery-1.7.js" charset="UTF-8"></script>
 <script type="text/javascript" src="javascript/codex/core.js" charset="UTF-8"></script>
 <script type="text/javascript" src="javascript/codex/codex.proxy.js" charset="UTF-8"></script>
 <script type="text/javascript" src="javascript/codex/codex.view.js" charset="UTF-8"></script>

Write HTML exactly as you need it to be

<div id="personEditView" data-source="personDataSource">
    <div class="field">
        <label for="person_full_name">Full Name</label>
        <input id="person_full_name" name="person[full_name]" type="text"/>
    </div>
    <div class="field">
        <label for="person_email">Email Address</label>
        <input id="person_email" name="person[email]" type="text"/>
    </div>
    <div class="field">
        <label for="person_address_street_name">Street Name</label>
        <input id="person_address_street_name" name="person[address][street_name]" type="text"/>
    </div>
    <div class="field">
        <label for="person_address_house_number">Hose Number</label>
        <input id="person_address_house_number" name="person[address][house_number]" type="text"/>
    </div>
    <div class="field">
        <label for="person_address_city">City</label>
        <select id="person_address_city" name="person[address][city]">
            <option value="">--Select--</option>
            <option value="Belgrade">Belgrade</option>
            <option value="Pancevo">Pancevo</option>
        </select>
    </div>
</div>
<div id="personView" data-source="personDataSource">
    <fieldset>
        <legend><span name="person[full_name]"></span>'s Address</legend>
        <span name="person[address][street_name]"></span>
        <span name="person[address][house_number]"></span>,
        <span name="person[address][city]"></span>
    </fieldset>
</div>

Usage

<script type="text/javascript">
    $(function() {
        var data = {
            person: {
                full_name: "Some Person Name",
                email: "example@domain.com",

                address: {
                    street_name: "Some Address here",
                    house_number: "5/2a",
                    city: "Belgrade"
                }
            }
        };

        var p = new codex.Proxy(data);
        console.log(p.person.email);

        var view = new codex.View("personEditView");
        var view = new codex.View("personView");
        // example of lazy load, you can use Ajax if you want
        setTimeout(function() {
            codex.dataSources.add("personDataSource", p);
        }, 1000);


    });
</script>