How to use Knockout text to bind DOM_Basic knowledge

Simple binding

Copy code The code is as follows:

Today's message is :




KO will set the parameter value in the innerText of the element (IE) or on the textContent (Firefox and other similar browsers) attribute. The original text will be overwritten.

If the parameter is observable, the text of the element will be updated according to the change of the parameter value. If not, the text of the element will only be set once and will not be updated in the future.
If what you pass is not a number or a string (such as an object or array), the displayed text will be the equivalent of yourParameter.toString().
Use a function or expression to determine the text value
Continue to add an attribute to the ViewModel above, and add a dependency monitoring attribute

Copy code The code is as follows:

price: ko.observable(24.95)

viewModel.priceRating = ko.dependentObservable(
function () {
return this .price() > 50 ? "expensive" : "affordable";
    }, viewModel);


Add a UI page element for binding

Copy code The code is as follows:

The item is

Now the text will alternate between "expensive" and "affordable", depending on how the price changes.

About HTML encoding
Because this binding sets the innerText or textContent of the element (rather than innerHTML), it is safe and has no risk of HTML or script injection. For example: If you write the following code:

Copy the code The code is as follows:

viewModel.myMessage( "Hello, world!");

It will not display the italics, but output the label as is. If you need to display HTML content, please refer to html binding.

About the white space of IE 6
IE6 has a strange problem. If there is a space in the span, it will automatically become an empty span. If you want to write code like the following, Knockout will have no effect.