4.绑定

1. 控制文本内容和外观

1. visible绑定

目的

visible绑定可以根据你传入绑定的值控制关联的DOM元素显示或隐藏。

例子

<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>

参数

  • 主参数

    • 当参数被解析为false(比如参数为false,数字0null,undefind),绑定会设置yourElement.style.display的值为none,使之隐藏。该优先级高于你通过css定义的样式。
    • 当参数被解析为true(比如true,非空对象或数组),绑定会移除yourElement.style.display的值,这样就会变为可见
    • 注意,你用css规则配置的任何显示样式都会被应用(所以比如像x { display:table-row } 这样的规则,绑定也能很好地一起工作)。
    • 如果参数是一个监控值,当值发生改变的时候,元素的可见性会更新。如果参数不是监控对象,它只会设置元素可见性一次,之后有改动不会更新样式。
  • 额外参数


    • 注意:使用函数或表达式控制元素可见性

你可以使用javascript函数或任何表达式作为参数值。如果这样,KO会运行函数或对表达式求值,然后由结果决定元素是否可见。

例子:

<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>

依赖

只有核心KO库

Knockout v3.4.0 中文版教程-10-绑定-控制文本内容和外观-visible绑定的更多相关文章

  1. Knockout v3.4.0 中文版教程-16-控制流-foreach绑定

    2. 控制流 1. foreach绑定 目的 foreach绑定会遍历一个数组,为每个数组项生成重复的元素标记结构并做关联.这在渲染列表或表格的时候特别有用. 假设你的数组是一个监控数组,之后无论你进 ...

  2. Knockout v3.4.0 中文版教程-12-控制文本内容和外观-html绑定

    3. html绑定 目的 html绑定会使关联的DOM元素显示你参数指定的html内容. 当你的视图模型里面的值是HTML标记字符串,而你想要呈现它,这时候用html绑定特别合适. 例子 <di ...

  3. Knockout v3.4.0 中文版教程-11-控制文本内容和外观-text绑定

    2. text绑定 目的 text绑定把传入的参数通过关联的DOM元素来显示文本值. 通常这对像<span>或<em>标签等使用,但技术上你可以对任何元素使用该绑定. 例子 T ...

  4. Knockout v3.4.0 中文版教程-7-计算监控-依赖跟踪如何工作

    3.依赖跟踪如何工作 初学者不需要知道这一点,但更高级的开发人员将想知道为我们怎么实现KO自动跟踪依赖性和自动更新UI的正确部分... 它其实相当简单优雅,跟踪算法如下: 当你定义一个计算监控,KO立 ...

  5. Knockout v3.4.0 中文版教程-14-控制文本内容和外观-style绑定

    5. style绑定 目的 style绑定用来给关联的DOM元素添加或移除一个或多个样式值.在如下情况很有用,比如,当某些值为负时,高亮显示,或者设置容器元素的宽度来匹配数值的改变. (注意:如果你不 ...

  6. Knockout v3.4.0 中文版教程-13-控制文本内容和外观-css绑定

    4. css绑定 目的 css绑定可以给关联的DOM元素添加或移除一个或多个CSS类.该绑定很有用,比如,当一些值为负数时高亮这些值为红色. (注意:如果你不想使用一个CSS类选择器来附加样式而想直接 ...

  7. Knockout v3.4.0 中文版教程-15-控制文本内容和外观-attr绑定

    6. attr绑定 目的 attr绑定可以给关联DOM元素的任何属性赋值.这个绑定很棒,比如,当你想要设置通过视图模型给元素的title属性.img标签的src属性或超链接的href值,当视图模型对应 ...

  8. Knockout v3.4.0 中文版教程-1-入门和安装

    英文原版教程:http://knockoutjs.com/documentation/introduction.html 注:此教程根据英文原版翻译,仅作练习,如有不足或错误,请指正 说明: 对原文中 ...

  9. Knockout v3.4.0 中文版教程-8-计算监控-纯计算属性

    4.纯计算属性 纯计算监控在KO 3.2.0中开始引入,比大多数应用程序使计算监控有更大的性能提升和内存优化.这是因为在自身没有订阅的时候不会保持订阅状态.特性如下 阻止内存泄露 - 避免在应用程序里 ...

随机推荐

  1. js中对象的理解

    JS中对象是可变的控件集合,对象的内容是可以更改的,可以为它添加任意属性或删除,而基本数据类型虽然拥有方法,但它们的值是不可变的,之所以它们拥有方法,是因为当它们调用方法是,后台会自动创建一个相映包装 ...

  2. LN : Eden Polymorphic And OOP Design Pattern Abstract Factory

    Appreciation to our TA, +7, who designed this task. Client.cpp #include <iostream> #include &l ...

  3. 2017 清北学堂 Day 6终极考试报告

    预计分数: 100+70+70 = 240 实际假分数 : 40+80+70= 190  in cena(好吧不得不承认这个分数,,,,,,=.=) 实际真分数 : 100+80+100 = 280 ...

  4. Vue的十个常用指令

    1.v-text:用于更新标签包含的文本,作用和{{}}的效果一样. 2.v-html:绑定一些包含html代码的数据在视图上. 3.v-show:用来控制元素的display属性,和显示隐藏有关.v ...

  5. php后端程序开发学习网站梳理

    博主只列举自己经常用到的: 看教学视频:慕课网,网易云课堂,百度传课 看博文和知识点:csdn 看源码:github 刷题:codewars 学习框架:thinkphp官网 下载相关资源:csdn 看 ...

  6. arcgis jsapi接口入门系列(1):地图

    地图相关 //地图相关demo mapFun: function () { //获取地图中心点 let center = this.mapView.center; //地图中心点坐标(同地图坐标系) ...

  7. ssh框架出现Java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I错误

    原因:因为Struts自带的antlr-2.7.2.jar,比Hibernate自带的antlr-2.7.7.jar的版本要低,存在jar包冲突现象,因此要删除前一个低版本的. 由于myeclipse ...

  8. Django之CSRF问题

    1.csrf全称:cross site request forgery(跨站请求伪造),举例来讲,一个安全的网站A,一个恶意网站B,当你在A网站进行了登录后,这时候浏览器会保存你的cookie和ses ...

  9. MATLAB批量修改图片名称

    申明:转载请注明出处. 设在“D:\UserDesktop\pic\”目录下有很多张格式为jpg照片,命名不规则,如图. 现在用MATLAB批量修改所有图片的命名格式,改为1.jpg,2.jpg,.. ...

  10. Windows 8.1 explorer.exe 出错 “Application Hang”

    不知道为什么explorer常常会卡一下 看系统日志发现有来源于“Application Hang”的错误 部分常规信息: 程序 explorer.exe 版本 6.3.9600.17415 停止与 ...