Getting started

Just copy the HTML below and run it. Now you have your first working example build with jsblocks.

<html>
  <head>
    <script src="http://jsblocks.com/jsblocks/blocks.js"></script>
    <script>
      blocks.query({
        name: blocks.observable()
      });
    </script>
  </head>
  <body>
    Name: <input placeholder="Enter your name" data-query="val(name)" />
    <h1>Hello, my name is {{name}}!</h1>
  </body>
</html>

Basic concepts

  • Use blocks.query() method and pass an object which could be accessed in the HTML. Calling the method executes all data-query attributes and {{expressions}}

    blocks.query({
  type: 'firstName',
  name: 'John Doe'
});

  • data-query attribute on a element is used to call query methods. Syntax is the same as calling a method in JavaScript with support for chaining

    <input data-query="val(name).setClass(type)" />
<div data-query="setClass(type)" />

  • {{expressions}} are used to render a value from the model into the DOM

    <input class="{{type}}" />
<h2>{{name}}</h2>

  • blocks.observable() is the object you create when you need a value that will be always synced in the model and in the DOM

    blocks.query({
  // the value will be always in sync with the DOM and vice versa
  name: blocks.observable('John Doe')
});

  • Use blocks.Application and its MVC(Model-View-Collection) structure to create better architecture and maintainability for your application

    var App = blocks.Application();

// create Models, Collections and Views here