KnockoutJS - 文本绑定
文本绑定使关联的 DOM 元素显示参数的文本值。这用于文本级 DOM 元素，例如 <span> 或 <em>。文本绑定接受任何数据类型，并在呈现之前将其解析为字符串。
语法
text: <binding-value>
参数
KO 使用参数值将元素的内容设置为文本节点。任何先前的内容都将被覆盖。
如果参数是可观察的，则每当底层属性发生变化时，元素值都会更新，否则仅在第一次分配时才分配。
如果传递了除数字或字符串以外的任何内容，则 KO 会将其解析为与 yourParameter.toString() 等效的字符串格式。
参数值也可以是 JavaScript 函数或返回文本值的任意 JavaScript 表达式。
示例
让我们看一下以下示例，该示例演示了文本绑定的使用。
<!DOCTYPE html>
<head>
<title>KnockoutJS text binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<p data-bind = "text: hiThere"></p>
<script>
function AppViewModel() {
this.hiThere = ko.observable("Hi TutorialsPoint !!!");
}
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述代码保存在 text-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
示例
让我们看另一个使用 Computed Observable 派生文本的示例。
<!DOCTYPE html>
<head>
<title>KnockoutJS text binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<p>Your full Name is <span data-bind="text: fullName"></span></p>
<script>
function AppViewModel() {
this.firstName= ko.observable("John");
this.lastName= ko.observable("Smith");
this.fullName = ko.computed( function() {
return this.firstName()+" "+this.lastName();
},this);
}
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述代码保存在 text-bind-fun.htm 文件中。
在浏览器中打开此 HTML 文件。
观察
HTML 编码
文本绑定转义 HTML 实体，这意味着可以设置任何字符串值而无需注入它。例如 −
viewModel.message("<strong>Hi TutorialsPoint !!!</strong>");
上述代码只会在屏幕上打印 <strong>Hi TutorialsPoint !!!</strong>。它不会使文本变为粗体。
使用没有容器元素的文本
有时无法使用 HTML 元素在另一个元素内设置文本。在这种情况下，可以使用无容器语法，它由注释标记组成，如下所示 −
<!--ko--> 和 <!--/ko--> 注释充当开始和结束标记，使其成为虚拟语法，并将数据绑定为真实容器。
让我们看看下面的例子。
<!DOCTYPE html>
<head>
<title>KnockoutJS container less text binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<p data-bind="text: hiThere"></p>
<select data-bind="foreach: items">
<option> <!--ko text: $data --><!--/ko--></option>
</select>
<script>
function AppViewModel() {
this.hiThere = ko.observable("Days of week !!!");
this.items = (['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday',
'Sunday']);
}
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述代码保存在 text-bind-containerless.htm 文件中。
在浏览器中打开此 HTML 文件。
请注意，此处使用 $data 绑定上下文来显示数组中的当前项目。
knockoutjs_declarative_bindings.html
