zoukankan      html  css  js  c++  java
  • 初学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库以外不依赖其它      

          

      

  • 相关阅读:
    luogu P1833 樱花 看成混合背包
    luogu P1077 摆花 基础记数dp
    luogu P1095 守望者的逃离 经典dp
    Even Subset Sum Problem CodeForces
    Maximum White Subtree CodeForces
    Sleeping Schedule CodeForces
    Bombs CodeForces
    病毒侵袭持续中 HDU
    病毒侵袭 HDU
    Educational Codeforces Round 35 (Rated for Div. 2)
  • 原文地址:https://www.cnblogs.com/petunsecn/p/5018133.html
Copyright © 2011-2022 走看看