CBS Syntax

Syntax

• Bind: #nameInput{value: name} bind value of "#nameInput" to "name" of current data context

• Pipe: #nameInput{value >@/checkLengh: name} bind value to "name", and check the length by calling "checkLength" function in global scope.

• Embedded Function: #ageInput{value > @{return Number(value);}: age} bind value to "age", convert the value to number by the embedded function

• Multiple Pipes: #nameInput{value > @/checkLengh > @/validName: name}

• Multi-binding: #titleString{text: (gender & name) >@/getTitle } bind the text content of "#helloString" to the "gender" and "name" on current data context. Generate the final string by calling @getTitle

• Event: #okButton{@click: /@onOKButtonClick} bind the "click" event of the button to "onOKButtonClick"

• Template: #userList{ foreach[template: userTemplate] : users;} fill "#userList" with "user", the child elements is created from "userTemplate"

• Bind to error status: #errorMessage{text: !#nameInput.value> {return value?value.message: "";}} bind the "#errorMessage"'s text to the error status of "#nameInput.value

• Embedded CBS blocks:

#profileEditor{    
    dataContext: currentUser;

    -> .nameInput{ value: name};    
    -> .generSelect{ value: gender};