Getting started

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

    <script src=""></script>
        name: blocks.observable()
    Name: <input placeholder="Enter your name" data-query="val(name)" />
    <h1>Hello, my name is {{name}}!</h1>

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}}

      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}}" />
  • blocks.observable() is the object you create when you need a value that will be always synced in the model and in the DOM

      // 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