It is possible to bind data by using ko.Bind. You can use a specific method of this object, which takes a lambda expression to specify the binding target. Both here and further on, we will show source Razor constructions and the resulting HTML code in the following way:
Razor: <span @ko.Bind.Text(m => m.MyText)> Html: <span data-bind="text: MyText">
It is possible to apply multiple data bindings to the element:
Razor: <span @ko.Bind.Text(m => m.MyText).Visible(m => m.MyVisible).Style("fontSize", m => m.MyFontSize)>
Html: <span data-bind="text: MyText, visible: MyVisible, style: {fontSize : MyFontSize}">You can define the following properties by using data bindings (you can find more information in the official Knockout MVC specification):
Visible: For this property, the example is as follows:Razor: @ko.Bind.Visible(m => m.MyVisible) Html: data-bind="visible: myVisible" Razor: @ko.Bind.Visible(m => !Convert.ToBoolean(m.MyInt)) Html: data-bind="visible: !MyInt"
Text: For this property, the example is as follows:Razor: @ko.Bind.Text(m => m.MyText) Html: data-bind="text: MyText"
Html: For this property, the example is as follows:Razor: @ko.Bind.Html(m => m.MyHtml) Html: data-bind="html: MyHtml"
Value: For this property, the example is as follows:Razor: @ko.Bind.Value(m => m.MyValue) Html: data-bind="value: MyValue"
Disable: For this property, the example is as follows:Razor: @ko.Bind.Disable(m => m.MyDisable) Html: data-bind="disable: MyDisable"
Enable: For this property, the example is as follows:Razor: @ko.Bind.Enable(m => m.MyEnable) Html: data-bind="enable: MyEnable"
Checked: For this property, the example is as follows:Razor: @ko.Bind.Checked(m => m.MyChecked) Html: data-bind="checked: MyChecked"
Options: For this property, the example is as follows:Razor: @ko.Bind.Options(m => m.MyOptions) Html: data-bind="options: MyOptions"
SelectedOptions: For this property, the example is as follows:Razor: @ko.Bind.SelectedOptions(m => m.MySelectedOptions) Html: data-bind="selectedOptions: MySelectedOptions"
OptionsCaption: For this property, the example is as follows:Razor: @ko.Bind.OptionsCaption(m => m.MyOptionsCaption) Html: data-bind="optionsCaption: MyOptionsCaption"
Disable: For this property, the example is as follows:Razor: @ko.Bind.Disable(m => m.MyDisable) Html: data-bind="disable: MyDisable"
UniqueName: For this property, the example is as follows:Razor: @ko.Bind.UniqueName() Html: data-bind="uniqueName: true"
ValueUpdate: For this property, the example is as follows:Razor: @ko.Bind.ValueUpdate(KnockoutValueUpdateKind.AfterKeyDown) Html: data-bind="valueUpdate: afterkeydown" Razor: @ko.Bind.ValueUpdate(KnockoutValueUpdateKind.Change) Html: data-bind="valueUpdate: change" Razor: @ko.Bind.ValueUpdate(KnockoutValueUpdateKind.KeyUp) Html: data-bind="valueUpdate: keyup" Razor: @ko.Bind.ValueUpdate(KnockoutValueUpdateKind.KeyPress) Html: data-bind="valueUpdate: keypress"
Css: For this property, the example is as follows:Razor: @ko.Bind.Css("class1", m => m.MyCondition1).Css("class2", m => m.MyCondition2) Html: data-bind="css: {class1: MyCondition1, class2: MyCondition2}"Style: For this property, the example is as follows:Razor: @ko.Bind.Style("color", m => m.MyColor).Style("fontSize", m => m.MyFontSize) Html: data-bind="style: {color: MyColor, fontSize: MyFontSize}"Attr: For this property, the example is as follows:Razor: @ko.Bind.Attr("href", m => m.MyHref).Attr("title", m => m.MyTitle) Html: data-bind="attr: {href: MyHref, title: MyTitle}"Click: For this property, the example is as follows:Razor: @ko.Bind.Click("ActionName", "ControllerName", new { parameter = "Key" }) Html: data-bind="click : function() {executeOnServer(viewModel, '/ControllerName/ActionName?parameter=Key');}"The
executeOnServerfunction is a helper function from theperpetuum.knockout.js(a Knockout MVC file), which wraps the jQuery AJAX call.Submit: For this property, the example is as follows:Razor: @ko.Bind.Submit("ActionName", "ControllerName", new { parameter = "Key" }) Html: data-bind="submit : function() {executeOnServer(viewModel, '/ControllerName/ActionName?parameter=Key');}"Custom: For this property, the example is as follows:Razor: @ko.Bind.Custom("customName", m => m.MyCustom) Html: data-bind="customName: MyCustom"