Knockout.js 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

Text

Text绑定主要是让DOM元素显示参数值。

通常情况下,该绑定在< span >和 < em > 这样的元素上非常有用,而实际上你可以绑定任何元素。

如下代码:

Today's message is: <span data-bind="text: myMessage"></span>

js代码如下:

var viewModel = {      
    myMessage: ko.observable() // Initially blank  
};    
viewModel.myMessage("Hello, world!"); // Text appears
ko.applyBindings(myViewModel);

如果你传入的不是一个值或者一个字符串(比如:你传入一个对象或者数组)那么显示的文本将是yourParameter.toString()的结果。

如果你想text值可编程化,一种选择是创建计算属性,然后在运算函数中编码决定text中显示什么。如下代码:

item is <span data-bind="text: priceRating"></span> today.

js代码如下:

var viewModel = {    
    price: ko.observable(24.95)  
};  
viewModel.priceRating = ko.computed(function() {    
    return this.price() > 50 ? "expensive" : "affordable";  
}, viewModel);
ko.applyBindings(myViewModel);

现在,text值将会在“expensive”和“affordable”之间选择,而这主要取决于“price”的变化。然而,假如你按照示例中的方式你则不需要创建计算属性。你可以传入任意的JavaScript表达式进行text绑定。

将上面代码中的price的值改为100,看看是什么结果呢?