CBS Syntax

Syntax

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

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

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

• Multiple Pipes #nameInput{value > @/checkLengh > @/validName: name}
  this will bind value to name and check the length and validate the value as name when value is changed.

• Multi-binding #titleString{text: (gender & name) >@/getTitle }
  this 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}
  this will bind the "click" event of the button to "onOKButtonClick"

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

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

• Embedded CBS blocks

#profileEditor{    
    dataContext: currentUser;
    -> .nameInput{ value: name};    
    -> .generSelect{ value: gender};
}

this will set the binding option for #profileEditor, #profileEditor .nameInput and #profileEditor .nameInput