MVVM Open Source Framework knot.js Tutorial 1-cbs Preliminary

CBS Preliminary

Learning Knot.js is actually learning how to use CBS. CBS uses a similar principle to CSS, which extracts the binding logic from HTML, greatly increasing the maintainability of the system.

After my first blog post on Knot.js, a friend pointed out that one of the most important purposes of CSS design was reuse, and that because it was a description of logic rather than style, reusability was not as strong as style, so what is the point of CBS existence?

In fact, CBS and CSS, although similar in principle, form similar, but the design purpose is very different. Although the binding logic is less reusable than a style, it is much more complex than a style. It is obviously detrimental to maintainability to cram a large number of logical descriptions into Htmltag's limited space. CBS is trying to solve this problem. The biggest difference between CBS and CSS in form is that CBS can be nested (yes, like less), and the resulting CBS will naturally and HTML structure be consistent, very convenient. While independent CBS can embed a lot of binding logic without compromising on reading, you'll find that the practical CBS often contains a lot of JavaScript embedding functions that are not naturally appropriate in CBS if they are stuck in HTML or put back into JavaScript.

Installation

Download the latest version of Knot.js to Http://knotjs.com/download/latest. The compressed knot.js master file and debugger are in the package, and you can use CBS on your Web page by referencing Knot.min.js.

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

If you want to open debugger (development and learning when recommended to open), and then refer to the next debugger JS file knot.debug.js is good. Note Enabling debugger has a significant impact on performance, be sure to remove debugger before publishing.

<src= "[path_to_knotjs]/debugger/knot.debug.js"></  Script>

Note that you must open your Web page from a Web server, or debugger may not work for security reasons. Also debugger must be in a domain with your Web page.

CBS Basics

Well, let's start by looking at the basic syntax of CBS:

The various parts of the CBS syntax are explained as follows:

1. Selector (selector): Support all the standard CSS Selector, but also support the object Selector (this you should rarely use, the details can be seen here: Selector @GitHub)
2. Access point: Indicates where this binding will be bound to the object.
   1. Left access point: Indicates the specific property of the object that is bound to the selector. If the selector selects an HTML object, it can be any property on those HTML objects. Note that you can use the data path (path of value), for example, by using "Style.display", you can bind directly to the display property of the HTML element's style object. In addition to the properties that come with the HTML object, Knot.js also provides some convenient and cross-browser extended properties (such as "text" in the following example), and if you are using Knot.js components, the component will have its own unique access point, refer to the documentation for that component.
   2. Right access point: Indicates the specific property name that is bound to the current data context object. Note that you can also use the data path, so if you bind to "User.address.postCode", there is no problem at all. You can also use absolute paths to access global variables, such as "/model.user.address.postcode", or you can use the target Modifier (binding target modifier) to bind to any HTML element. We'll talk about target modifier later.

There are more introductions to access point later. If you want to know more now, see here: Access point @GitHub

2. Binding type: Knot.js provides four types of binding type distributions are ":" (Two-way binding), "= =" (Right-bound), "<=" (left-bound), and "=" (one-time binding). Utilizing these binding types allows you to maximize system efficiency. However, when performance is not particularly sensitive, use ":" (Two-way binding) is fast enough, so if you do not know what type to use, please use ":" directly. For a detailed description of the binding type, see this link: binding-types ([email protected])
4. Data context (DataContext): Typically, a data context is a JavaScript object that you want to bind to an HTML element.
   1. You can specify the data context for an HTML element by using the "DataContext" access point. For example:
      

      Body { dataContext:}

      The above code sets the JAVASCIRPT global object model to the data context of the "body" element.

   2. The data context is inherited based on the DOM structure. For example in 1, the default data context for all elements in the page becomes the model object, unless the element itself has a DataContext setting. If an element has its own DataContext setting, all its child elements will inherit this setting.
6. CBS can nest writing. I highly recommend nesting CBS, which can significantly improve the maintainability of CBS. A nested CBS needs to be added with a "--" in front of the selector. See example:
   

    /*   This is a "traditional", CSS-style approach  Span style= "color: #008000;" >*/ .example input  {value : name ;} .example. Message  {text :  name ;} /*   */ .example  {: name ;}     {text :  name ;} ;}  

    

8. CBS uses the script tag of type= "Text/cbs" to declare it. Like JavaScript, you can directly place the CBS in this tag, or you can refer to a standalone CBS file outside the page via the "src" attribute. For example:
   

   <type= "Text/cbs"  src= "[Path_to_cbs]/example.cbs"> </script>

10. Knot.js also supports the practice of placing binding configurations directly within HTML (although not recommended)
    

    <type= "text"  binding= "Value:name">

12. For a more complete example of CBS syntax, check here: CBS Syntax @GitHub, which involves concepts and content I'll cover in detail later.

Example

Let's look at a concrete simple example. This example is the example we mentioned at the end of the first article, just a little bit of modification, adding a JavaScript object. Enter a name to display a greeting. You can click this link: knot.js English version Tutorial to try this example.

The streaming diagram is like this:

Html:

<Divclass= "Knot_example">    <H3>Greeting from Knot.js (V2)</H3>    <P>        <label>Input Your name here:</label>        <inputtype= "text">    </P>    <P>Hello<bclass= "Hellostring"></b>    </P></Div>

Javascript:

// use one of the simplest JavaScript objects directly to do modelWindow.greetingmodel = {name: "Alex"};

Cbs:

<script type= "Text/cbs" >.knot_example{/*set DataContext as a JavaScript global object Window.greetingmodel*/DataContext:/greetingmodel;/*bind value to name. Because the current data context is window.greetingmode, this setting can also be written as "value[immediately:1":/greetingmodel.na Me "[Immediately:1]" is a binding option that indicates that the data is updated each time the keystroke is pressed. The default is 0, which indicates that the focus moves out of the text box to update the data*/input{value[immediately:1]: Name; }; /*bind text to name, same as the existence of data context, eventually bound to Window.greetingModel.name*/hellostring.{text:name; }}</script>

For CBS, note the following points:

• If you want to initialize the Knot.js and then execute a program after binding, use Knot.ready:
  

  Knot.ready (function(succeed, err) {    if(!  SUCC) {        global.alert (err.message);         return ;    }     // your own code ....}

• Like CSS, CBS is also applied to all HTML elements that are selector selected. For example, the following CBS will bind the text of all the elements on the page that contain the "title" and the title property of the element's DataContext .
  

  . Title { text:}

• Not all access points support two-way binding. For example, the ". Hellostring" In the example above is a span, and its textcontent obviously does not change itself, so it does not support bidirectional binding. Therefore, the two-way binding to it will actually become a one-way binding:
  

  /**/. hellostring{text: name;} /*  */. hellostring{text <= name;}

  For a list of HTML access points that support two-way binding, see here: Observable HTML access point list @GitHub

If you are interested in knot.js, please follow me for a follow up update alert. At the same time please click on the recommended article, knot.js need enough attention to attract developers and build their own community.

Knot.js Thank you for your support.

MVVM Open Source Framework knot.js Tutorial 1-cbs Preliminary