text: <binding-value>

优质

小牛编辑

119浏览

2023-12-01

文本绑定使关联的DOM元素显示参数的文本值。这用于文本级DOM元素，例如《span》或《em》 。文本绑定接受任何数据类型，并在呈现之前将其解析为String。

Syntax

text: <binding-value>

Parameters

KO使用您的参数值将元素的内容设置为文本节点。之前的任何内容都将被覆盖。
如果参数是可观察的，则只要底层属性发生更改，元素值就会更新，否则仅在第一次分配时。
如果传递了除Number或String之外的任何内容，则KO将其解析为等效于yourParameter.toString（）的String格式。
参数值也可以是JavaScript函数或返回文本值的任意JavaScript表达式。

Example

让我们看一下下面的示例，该示例演示了文本绑定的用法。

<!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 xnip !!!");
         }
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Output

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

将上述代码保存在text-bind.htm文件中。
在浏览器中打开此HTML文件。

Example

让我们看一下使用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>

Output

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

将以上代码保存在text-bind-fun.htm文件中。
在浏览器中打开此HTML文件。

观察 (Observations)

HTML编码

文本绑定转义HTML实体，这意味着可以设置任何String值而不会将其注入。例如 -

viewModel.message("<strong>Hi xnip !!!</strong>");

上面的代码只会在屏幕上打印 Hi xnip !!! strong>。 它不会使文本变粗。

使用没有容器元素的文本

有时，无法使用HTML元素在另一个元素中设置文本。在这种情况下，可以使用无container-less syntax ，其中包含如下所示的注释标记 -

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

Output

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

将以上代码保存在text-bind-containerless.htm文件中。
在浏览器中打开此HTML文件。
注意，这里使用$ data binding context来显示数组中的当前项。

text: &lt;binding-value&gt;

观察 (Observations)

HTML编码

使用没有容器元素的文本

text: <binding-value>