小虾虎鱼

小虾虎鱼

Knockoutjs控制元素内文本显示的方法:text

作者 禾惠 发表于 2015/05/11,最后修改于 2015/05/11

Knockout控制元素内文本显示需要使用text绑定方法,此方法相当于在DOM中使用innerText将文本放入到元素中。使用的方法是:

<div data-bind="text:myText"></div>

其中,myText可以是字符串、函数、表达式,只要最终返回的结果是字符串即可正常显示。下面列举一些相关例子。

字符串形式

<div data-bind="text:'小虾虎鱼'"></div>

注意:此方式在实际应用中无任何意义。

函数形式

  • 使用Obervable的方法
    <div data-bind="text:myText"></div>
    <script>
    var viewmodel = {
      myText:ko.observable('小虾虎鱼')
    };
    ko.applyBindings(viewmodel);
    </script>
    
  • 使用自定义函数的方法
    <div data-bind="text:myText('abc')"></div>
    <script>
    var viewmodel = {
      myText:function(text){
          return text;
      }
    };
    ko.applyBindings(viewmodel);
    </script>
    

表达式形式

<div data-bind="text:myText()?'小虾':'虎鱼'"></div>

以上便是控制元素内文本显示的三种方式。

下面来一个较为复杂的例子,该例子的应用场景比较广泛。需求是这样子的: 有一个按钮和一个状态文本,点击按钮时状态文本发生变化并且按钮的文本也会变化。如默认按钮的文本是禁用,状态文本是已启用,当点击按钮后,按钮的文本变成启用,状态文本变成已禁用,如此规律循环。 代码如下:

<span data-bind="text:status()?'已启用':'已禁用'"></span>
<button data-bind="text:status()?'禁用':'启用',click:change"></button>
<script>
var viewmodel = {
    status:ko.observable(true),
    change:function($data){
        $data.status(!$data.status());
    }
};
ko.applyBindings(viewmodel);
</script>