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 文件。

示例

让我们来看另一个示例，其中文本是使用计算可观察对象导出的。

实时演示

<!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 元素在另一个元素内设置文本。在这种情况下，可以使用无容器语法，它由如下所示的注释标签组成：

和注释充当开始和结束标记，使其成为虚拟语法，并将数据绑定到就像它是一个真实的容器一样。

让我们来看一下以下示例。

实时演示

<!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.htm

打印页面