KnockoutJS - 文本绑定

更新于 2025/1/16 7:07:17

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

 和  注释充当开始和结束标记，使其成为虚拟语法，并将数据绑定为真实容器。

让我们看看下面的例子。

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

输出

让我们执行以下步骤来查看上述代码的工作原理 −