2. Getting started - MagnusThor/BobTheBinder GitHub Wiki

Getting started with Bob is very simple, as Bob doesn't force you to wrap or inherit proprietary types in order to work you can just use your existing JavaScript objects. It is also easy to decouple from Bob and use what any other framework of your choice.

The following examples ( intro ) requires that you have the Bob JavaScript files in place ( see installation ).

Let's create a simple model containing to properties that we want to data-bind using Bob

var ViewModel = function () {
    this.item = {
        name: "John Doe",
        age: 40,
    }
};

Or View model now contains a object name "item" that holds to properties, name and age. The initial value for the name is "John Doe" and the age is 40.

##Activate Bob The Binder

As the browser is not aware of your bindings, we need to tell the browser to apply the bindings, this is done after the page skeleton of yours is loaded (DOMContentLoaded occurs)

First we need to create a new instance of our ViewModel (note that you can also use a literal if you prefer so )

var vm = new ViewModel();  // create an new instance of our "ViewModel" class


 $(function() {
    Bob.apply(Bob.binders).bind($("#app"), vm);
});

In the code snippet above we call tell Bob to apply the "Binders" registered on the all DOM elements associated (bound) within the element of "#app"

Our markup (view) containing our DOM elements has the following look

 <div id="app">
    <p>
        The value if item.name is '<mark data-bind="text:item.name"></mark>'
    </p>
    <div>
        <label>Name:</label>
        <input type="text" data-bind="value:item.name" />
    </div>
</div>

###Change a property

Bob is 2-way data bound and causes the associated DOM elements to update when the model is changes, vice versa a linked binding such as the "value binder" will update the model.

So by just changing the model as follows (use the JavaScript console)

vm.item.name = "Britney Spears" ;

By just changing the property name of item , will cause to binders to react on the change , as the DOM element <mark> is using the text binder, it's text (innerText) will change as well as the value of the <input> element will change as both those DOM elements are associated to the same object and property.