（二）Knockout 文本与外观绑定

Visible

Visible binding会依据绑定的数据来决定相应的DOM元素是否隐藏，hidden或visible。

我们首先在js文件部分定义一个view model，这里我创建的是一个object而不是一个构造函数，个人分析认为，object类型的定义就是一种persistent view model，而构造函数类型的定义就是一种temporary view model，这个也许和pure computed observables中的性能有关，可和knockout学习笔记（四）联系起来。

    <div data-bind="visible: shouldShowMessage">
      You will see this message only when "shouldShowMessage" holds a true
      value.
    </div>
    
    <script>
        var viewModel = {
          shouldShowMessage: ko.observable(true) // Message initially visible
        };
        viewModel.shouldShowMessage(false); //隐藏元素
        //viewModel.shouldShowMessage(true);  //显示元素
        ko.applyBindings(viewModel);
      </script>

Text

Text binding会使得相应的DOM element的text部分变为参数的值。

   <p>This is my text: <span data-bind="text: myText"></span></p>

    <script>
      var myViewModel = {
        myText: ko.observable()
      };

      ko.applyBindings(myViewModel);

      myViewModel.myText("Hello world!");
      ko.applyBindings(viewModel);
    </script>

输出结果：

This is my text: Hello world!

备注 1 ： 使用函数和值表达式

 <p>This is my text: <span data-bind="text: myComputed"></span></p>
    
    <script type="text/javascript">
      var viewModel = {
        myText: ko.observable(60),
      };

      viewModel.myComputed = ko.pureComputed(function () {
        return this.myText() > 50 ? "Big" : "Small";
      }, viewModel);

      ko.applyBindings(viewModel);

    </script>

输出结果：

This is my text: Big

备注2：关于HTML编码

如果我们传入text的参数中含有html的标签，页面中并不会将其以标签的形式展现，而是会以字符串的方式展现出来，例如：

myViewModel.myText("<i>Hello world!</i>");

输出结果：

This is my text: <i>Hello world!</i>

这样也可以防止HTML或是script的注入攻击。而有关html标签的绑定则需要参考html binding

备注3：无容器

在某些时候，我们需要在不指定元素的情况下直接插入text，此时我们可以使用无容器的语法来定义一个text binding。例如在option element中是不允许包含其他元素的，如果我们如下定义data-bind

为了处理这个问题 ， 可以使用空空的语法基于注释标签。

<select data-bind="foreach: items">
    <option>Item <!--ko text: name--><!--/ko--></option>
</select>

我们并不能得到view model中的observable，无容器的语法则是这样写的：

<select data-bind="foreach: myItems">
    <option>Item <!--ko text: name--><!--/ko--></option>
</select>

<!--ko-->和<!--/ko-->扮演着开始标志和结束标志，它们定义了一个虚拟元素，knockout语法能够理解这种写法并像对待一个最真实元素那样去绑定相应的view model内的值。

完整的案例：

<select data-bind="foreach: myItems">
  <option>Item <span data-bind="text: name"></span></option>
</select>

<select data-bind="foreach: myItems">
    <option>Item <!--ko text: name--><!--/ko--></option>
</select>

<script type="text/javascript">
    var vm = {
        myItems: [
            { name: 'Item 1', id: 1},
            { name: 'Item 3', id: 3},
            { name: 'Item 4', id: 4}
        ]
    };
    ko.applyBindings(vm);
</script>