Home

Welcome to knot.js Wiki! The first thing you need to know about knot.js is CBS.

CBS Basic CBS stands for Cascading Binding Sheet. It is intended to extract binding logic from your HTML. In addition to the clean HTML, you also get the structured, clean, easily readable data binding logic that is defined in CBS.

CBS is not only looks like CSS, it works almost in the same manner as CSS. A typical CBS often has these parts:

SELECTOR { LEFT_ACCESSPOINT : RIGHT_ACCESS_POINT }

Here is an example:

.nameInput{value : name}

The above bind the name property of current data context object to the value property of the input with CSS class "nameInput".

• To enable CBS in your page, you just need to add the line below to reference knot.js package:

  <script src="[PATH_TO_KNOTJS]/knot.min.js"></script>

• CBS can be put into a stand-along file, and loaded into system by "script" tag with content type "text/cbs"

• Selector works in exactly the same way as CSS Selector. It can be any of the CSS selectors or an Object Selector. For more information about the Selector, please follow this link:Selector(Wiki@GitHub)

• Similar to CSS, binding option apply to all HTML elements that selected by Selector. For example, the CBS below will bind the text content of all of the elements with class "title" to the "title" property of their own Data Context objects.

  .title{ text: title }

• Each section ends with ";"

• Access Point is the description of where you want to bind to the target, it depends on the target.

  1. Left Access Point is on the object selected by "Selector" (in most case, it's a HTML element). It can be any properties on the HTML element, or it can be a path like "style.backgroundColor".
  2. Right Access Point is on the current Data Context. It can be properties or path of value like "address.postCode". And it can also be the absolute path of value that starts with "/". In this case, knot.js ignores the current Data Context and get the data from the global scope.
  3. Access Point is extensible. The component created by knot.js often supports it's own special Access Points. Please check the document of the component that you are using.
  4. For more information about the Access Point, please follow this link: Access Point(Wiki@GitHub)

• There are four Binding Types: : for two-way binding, "=>","<=" for one-way binding and "=" for one-off binding. For more information about Binding Types, please follow this link:Binding-types(Wiki@GitHub) Just use ":" if you don't know which type you should use.

• Data Context is the data you want to bind to the HTML element.

  1. Data Context is specified by the Access Point named "dataContext". Here's an example: body{ dataContext: /model }
  2. If there's no dataContext specified, a HTML node inherits it's Data Context from the closest DOM ancestors that has Data Context.

• You can embed a CBS declaration into another by adding "->" before the selector. This makes your CBS looks more structured and easier for reading. Here's example:

/*this is the 'traditional' way*/
.example input{value:name;}
.example .message{text: name;}

/*This is the better way in CBS. They are identical in result*/
.example{
    -> input{value:name;};
    -> .message{text: name;};
}

For more information, please check the examples and WIKI