初学knockoutjs记录9——Bindings 绑定（1 Controling text and appearance 控制文本和外观）

标签：

1 The “visible” binding

　　Purpose 用途

　　　　visible绑定用于根据你传入绑定的值来触发相关的DOM元素隐藏或可见。

　　Example

<div data-bind="visible: shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>

<script type="text/javascript">
    var viewModel = {
        shouldShowMessage: ko.observable(true) // Message initially visible
    };
    viewModel.shouldShowMessage(false); // ... now it‘s hidden
    viewModel.shouldShowMessage(true); // ... now it‘s visible again
</script>

　　Parameters 参数

　　　　Main parameter 主要参数

　　　　　　当该参数被设置为类似false的值时（如布尔类型的false,或者数字0，或者null, 或者undefined）,绑定会设置相关元素的显示样式为"none"(yourElement.style.display="none"),从而使其隐藏掉，该设置优先于任何你定义的CSS样式；

　　　　　　当该参数被设置为类似true的值时（如布尔类型的true,或者非空对象或数组时），绑定将会移除相关元素的显示样式，即移除设置给yourElement.style.display的值，这将触发其显示出来；注意你配置的任何CSS显示样式都适用该规则（例如像 x{display:table-row}可以很好的与该绑定协同工作）

            如果该参数时一个监控属性值，绑定会在任何时候该监控属性值变化时更新元素的可见属性，如果该参数不是监控属性，那么它只会设置一次元素的可见属性，之后不会随着值的变化来再次更新元素。

        Additional parameters 附加参数

　　　　　　无

    Note: Using functions and expressions to control element visibility 注： 使用函数或表达式控制元素可见

　　　　你可以使用javascript函数或者任意的javascript表达式作为参数值，如果你这样做，KO会执行函数或计算表达式，并使用结果值来决定是否隐藏相关的元素。

　　For examle,

<div data-bind="visible: myValues().length > 0">
    You will see this message only when ‘myValues‘ has at least one member.
</div>

<script type="text/javascript">
    var viewModel = {
        myValues： ko.observableArray([]) // Initially empty, so message hidden
    };
    viewModel.myValues.push("some value"); // Now visible
</script>

    Dependencies 依赖
　　　　除了Knockout库以外不依赖其它　　　　　　

初学knockoutjs记录9——Bindings 绑定（1 Controling text and appearance 控制文本和外观）

标签：

原文地址：http://www.cnblogs.com/petunsecn/p/5018133.html