Knockout is a standalone JavaScript implementation of the Model-View-ViewModel pattern with templates.For more info http://en.wikipedia.org/wiki/KnockoutJS
Introduction
This article shows the walk through of different bindings used in Knockout.js
In this context, we will see the overview of how to control the appearance & style of the controls using Knockout.JS Bindings.
- visible binding
- text binding
- HTML binding
- CSS binding
- style binding
- attr binding
Let us know each one in detail
Visible binding
The visible binding causes the associated DOM element to become hidden or visible according to the value you pass to the binding.
<div data-bind="visible: showinfo">
Show Information
</div>
<script type="text/javascript">
var viewModel = {
showinfo: ko.observable(true) // Message initially visible
};
viewModel.showinfo(false); // now it's hidden
viewModel.showinfo(true); // now it's visible again
</script>
The Text Binding
The text binding causes the associated element to display the text value of the parameter.
Typically this is useful with elements like <span> or <em> that traditionally display text, but technically you can use it with any element.
<span data-bind="text: myText"></span>
<script type="text/javascript">
var viewModel = {
myText: ko.observable() // Initially blank
};
viewModel.myText("Hello, world!"); // Text appears
</script>
The Html Binding
The html binding causes the associated DOM element to display the HTML specified by your parameter.
Typically this is useful when values in your view model are actually strings of HTML markup that you want to render.
<div data-bind="html: details"></div>
<script type="text/javascript">
var viewModel = {
details: ko.observable() // Initially blank
};
viewModel.details("<em>For further information, view the report <a href='index.html'>here</a>.</em>"); // HTML content appears
</script>
The CSS BindingThe css binding adds or removes one or more named CSS classes to the associated DOM element. This is useful, for example, to highlight some value in red if it becomes negative.
.green{ background: yellow; }
.red { background: red; }
Html Markup:
<b>Sample CSS binding</b>
<p> Enter integer: <input data-bind="value: integer, valueUpdate: 'keyup', css: integer() >= 0 ? 'yellow;' : 'red'" /> </p>
The Style Binding
The style binding adds or removes one or more style values to the associated element. This is useful, for example, to highlight some value in red if it becomes negative, or to set the width of a bar to match a numerical value that changes.
<b>Sample style binding</b>
<p> Enter number: <input data-bind="value: integerStyle, valueUpdate: 'keyup',
style: { background: integerStyle() >= 0 ? 'yellow' : 'red' }" />
</p>The attr Binding
The attr binding provides a generic way to set the value of any attribute for the associated DOM element. This is useful, for example, when you need to set the title attribute of an element, the src of an img tag, or the href of a link based on values in your view model, with the attribute value being updated automatically whenever the corresponding model property changes
<div data-bind="attr: { data-something: someValue }">...</div>Conclusion
In this article we have learned how to use Bindings in knockout
Reference
http://knockoutjs.com/documentation/attr-binding.html