Bindings Reference

Requires MVCControlToolkit.Controls.x.x.x.js or the smaller MVCControlToolkit.Controls.Core.x.x.x.js, and knockout.all.x.x.x.min.js.

Requires the inclusion of the namespace: MVCControlsToolkit.Controls.Bindings

 

public IBindingsBuilder<M> CSS<F>(
            string className,
            Expression<Func<M, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions)

 

Add or remove the Css class className from the Html element according to the value of the boolean property specified by expression. If format is specified both expression and the further lambda expressions contained in otherExpressions are transformed into text and used as argument of a string.Format instruction, whose format is specified by format, thus allowing the definition of a more complex binding according to the sintax specified here: http://knockoutjs.com/documentation/css-binding.html 

 

public IBindingsBuilder<M> Style<F>(
            string stylePropertyName,
            Expression<Func<M, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions )

 

Set the style property stylePropertyName of Html element to the value of theproperty specified by expression. If format is specified both expression and the further lambda expressions contained in otherExpressions are transformed into text and used as argument of a string.Format instruction, whose format is specified by format, thus allowing the definition of a more complex binding according to the sintax specified here: http://knockoutjs.com/documentation/style-binding.html 

 

public IBindingsBuilder<M> Attr<F>(
            string attrName,
            Expression<Func<M, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions)

Set the the Html 5 attribute attrName of Html element to the value of the property specified by expression. If format is specified both expression and the further lambda expressions contained in otherExpressions are transformed into text and used as argument of a string.Format instruction, whose format is specified by format, thus allowing the definition of a more complex binding according to the sintax specified here: http://knockoutjs.com/documentation/attr-binding.html 

 

public static IBindingsBuilder<T> Enable<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions)

 

public static IBindingsBuilder<T> Disable<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions)

Respectively put in the Enabled or Disabled state the input element they are bound to according to the value of the boolean property specified by expression.  If format is specified both expression and the further lambda expressions contained in otherExpressions are transformed into text and used as argument of a string.Format instruction, whose format is specified by format, thus allowing the definition of a more complex binding according to the sintax specified here: http://knockoutjs.com/documentation/enable-binding.html

 

public static IBindingsBuilder<T> HasFocus<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions)

 

Binds a boolean property to the focus state of a DOM element: if the element get focus the property receives a true value, and viceversa if the property is set to true the DOM element receives the focus. 

public IBindingsBuilder<M> Event<F>(
            string eventName,
            Expression<Func<M, F>> expression,
            bool bubble=true,
            string format = null,
            params LambdaExpression[] otherExpressions)

 

Add to the event eventName of the Html element the Client ViewModel method contained in the property specified by expression, as handler.  If format is specified both expression and the further lambda expressions contained in otherExpressions are transformed into text and used as argument of a string.Format instruction, whose format is specified by format, thus allowing the definition of a more complex binding according to the sintax specified here: http://knockoutjs.com/documentation/event-binding.html. If bubble is true, the evnt will be bubbled up.

 

public static IBindingsBuilder<T> Click<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions)

It is a particular case of the Event binding, specific for the Click event.

 

public static IBindingsBuilder<T> Submit<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions)

 

It is a particular case of the Event binding, specific for the Submit event.

 

public static IBindingsBuilder<T> Text<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions)

 

 

 public static IBindingsBuilder<T> Html<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions)

 

Respectively bind the text or html content of the Html element to the ViewModel property specified by expression.  If format is specified both expression and the further lambda expressions contained in otherExpressions are transformed into text and used as argument of a string.Format instruction, whose format is specified by format, thus allowing the definition of a more complex binding according to the sintax specified here:http://knockoutjs.com/documentation/text-binding.html and here: http://knockoutjs.com/documentation/html-binding.html.  In the case of the Text binding the the value contained in the ViewModel property is transformed into string and formatted according to the actual  according to the actual globalization settings and to the dotnet formatting specification contained in the FormatAttribute of the sever side counterpart of the property, if any.

The bindings below don't need to be called manually since they are automatically defined according to a name convention, when we use Client Blocks.

 

public static IBindingsBuilder<T> Value<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression)

 

Binds the value property of an input field to the ViewModel property specified by expression.

 

public static IBindingsBuilder<T> Checked<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression,
            string format = null,
            params LambdaExpression[] otherExpressions)

 

Binds the checked property of an input field(checkbox or radiobutton) to the boolean ViewModel property specified by expression. If format is specified both expression and the further lambda expressions contained in otherExpressions are transformed into text and used as argument of a string.Format instruction, whose format is specified by format, thus allowing the definition of a more complex binding according to the sintax specified here: http://knockoutjs.com/documentation/checked-binding.html

 

public static IBindingsBuilder<T> Options<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression,
            string caption=null)
public static IBindingsBuilder<T> Options<T, F, IF, IFT>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, IEnumerable<F>>> expression,
            Expression<Func<F, IF>> valueField,
            Expression<Func<F, IFT>> textField,
            string caption=null)

 

Binds the option list of a DropDown or ListBox to the array property of the ViewModel specified by expression. If caption is furnisshed it is used as the Text value of the first option, and this first option wuill be given a empty string value.

If the first overload is used the values of the options will be equal to their texts, and the array is expected to contain value types (strings, int, floats, etc.) The second overloads is used to give separate values to the text and values of the options. In this case the array must contain a complex type. valueField specifies wich property of the complex type to use for the value of each option tag, while textField specifies the property to use for the text of each option.

 

public static IBindingsBuilder<T> SelectedOptions<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            Expression<Func<T, F>> expression)

 

Binds the value field of the selected items of a ListBox to the array property of the ViewModel specified by expression.

 

public static IBindingsBuilder<T> Template<T, F>(
            this IBindingsBuilder<T> bindingsBuilder,
            string templateName,
            Expression<Func<T, F>> expression,
            string afterAdd=null,
            string beforeRemove=null,
            string afterRender=null,
            object templateOptions=null,
            string prefix=null,
            bool applyClientValidation=true,
            bool fastNoJavaScript=false,
            string afterAllRender=null,
            string templateEngine=null)

 

This is a low level function, normally one would like to use the ClientBlockRepeater, to istantiate a template on a collection. 

The Html element the binding is associated with is used as a container for the Html nodes created by instantiating the template specified by templateName on all elements of the array property specified by expression. Whenever, the array is modified new html nodes are created, destroyed, or modified to reflect the changes in the ViewModel.

beforeRemove, AfterAdd, afterRender, and afterAllRender are javascript functions that are specified either as  names of methods of the ViewModel, or with the lambda format (function(....){....}).

beforeRemove and AfterAdd are called respectively before removing an Html node and after having created it. They are passed the Html node as argument.

afterRender, and afterAllRender are called, respectively, after having instantiated each template and after all template rendering job triggered by a modification of the ViewModel array is terminated. They are a good opportunity to initialize each single item, for instance by applying to it some jQuery UI, and to initialize the whole collection of Html nodes, for instance by calling .sortable("refresh") if we would like to handle all elements as a jQuery UI sortable. afterRender is passed the array of all Dom nodes created as a result of the template instantiation. afterAllRender is passed two arguments: the root element of all Html nodes, and the ViewModel.

The newly created elements are parsed for unobtrusive validation only if applyClientValidation is true.

fastNoJavascript declares that the template doesn't contain any javascript. In this case the template instantiation is simpler and faster.

templateEngine is passed to use a template engine different from the default template engine, see here for more information.

For more information on client side templates, please see here: Client-Side Templates 

Last edited Jun 22, 2014 at 10:46 AM by frankabbruzzese, version 18

Comments

No comments yet.