Simple binding
Copy Code code as follows:
Today's message is: <span data-bind= "Text:mymessage" ></span>
<script type= "Text/javascript" src= "~/scripts/knockout-2.3.0.debug.js" ></script>
<script type= "Text/javascript" >
var ViewModel = {
MyMessage:ko.observable ()
};
Viewmodel.mymessage ("Hello, world!");
Ko.applybindings (ViewModel);
</script>
Ko sets the value of the parameter on the element's innertext (IE) or Textcontent (Firefox and other similar browsers) properties. The original text will be overwritten.
If the parameter is a monitor property observable, the text of the element will be updated based on the change of the parameter value, and if not, the text of the element will be set once and not later.
If you pass a number or a string (such as an object or an array), the text displayed will be the equivalent of yourparameter.tostring ().
Use a function or an expression to determine the text value
Continue to add a property to the ViewModel above and add a dependency monitoring property
Copy Code code as follows:
Price:ko.observable (24.95)
viewmodel.pricerating = ko.dependentobservable (
function () {
return This.price () > 50? "Expensive": "affordable";
}, ViewModel);
Add a UI page element to bind
Copy Code code as follows:
The item is <span data-bind= ' text:pricerating ' ></span> today.
Now, the text will be replaced between "expensive" and "affordable", depending on how the price changes.
About HTML Encoding
Because the binding is the innertext or textcontent (not innerhtml) of the set element, it is safe, without the risk of HTML or scripting injection. For example: If you write the following code:
Copy Code code as follows:
Viewmodel.mymessage ("<i>hello, world!</i>");
It does not display italic text, but instead prints the label as it is. If you need to display HTML content, refer to HTML bindings.
About IE 6 white space whitespace
IE6 has a strange problem, if there is a space in span, it will automatically become an empty span. If you want to write the following code, that knockout will have no effect.
