• 初学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库以外不依赖其它      

          

      

  • 相关阅读:
    Ubuntu 安装Python3.8 【转】
    在 RK3399 上运行开源的 Mali GPU 驱动【转】
    windos下对SD卡进行操作,制作FAT32格式SD卡
    Linux使用htop命令说明【转】
    【RabbitMQ】Java发送监听消息
    【ElasticSearch】批量检索文档
    【MySQL】检查表是否存在
    【Postgres】安装
    【CentOS】定时crontab
    信创
  • 原文地址:https://www.cnblogs.com/petunsecn/p/5018133.html
Copyright © 2020-2023  润新知