目的

Visible绑定通过绑定一个值来确定DOM元素显示或隐藏

<script src="knockout.js"></script>
<div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value.</div>
<div data-bind="visible: shouldShowMessage1"> You will see this message only when "shouldShowMessage" holds a true value.</div>
<script>
var viewModel = {
shouldShowMessage:false,
shouldShowMessage1:true
};
ko.applyBindings(viewModel);
</script>

或者

<div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value.</div>
<div data-bind="visible: shouldShowMessage1"> You will see this message only when "shouldShowMessage" holds a true value.</div>
<script>
var viewModel = {
shouldShowMessage:ko.observable(false),
shouldShowMessage1:ko.observable(true)
};
ko.applyBindings(viewModel);
</script>

或者这样写

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

 
 

主参数

当参数设置为一个假值(例如bool型值false、整型值0、null或者undefined)时,该绑定会设置yourElement.style.display为 none,让元素隐藏。它的优先级高于任何你在CSS中定义的隐藏样式。

当参数设置为一个真值(例如bool型值true、不等于null、Object对象或数组)时,该绑定会去掉yourElement.style.display值,让元素显示。

注意,任何你在CSS中定义的样式会立即应用生效。

如果参数是一个observable值,visible绑定使得元素的visible状态随着参数值的变化而变化。如果参数不是observable值,visible绑定仅仅会设置元素visible状态一次,以后不会再更新。

其他参数

注:使用函数或表达式来控制元素显示隐藏

你可以选择使用JavaScript函数或者表达式作为参数值。这样的话,KO将会运行你的函数或者表达式,返回的结果来控制元素显示或者隐藏。

例如:

1
2
3
4
5
6
7
8
9
<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>

依赖关系

除了Knockout核心库之外,无依赖关系。

Visible 绑定的更多相关文章

  1. Knockout 新版应用开发教程之"visible"绑定

    "visible" 绑定 用途 DOM元素的显示或者隐藏是根据绑定的值来的,前提是将visible绑定给该元素 例子 <div data-bind="visible ...

  2. Knockout.Js官网学习(visible绑定)

    前言 让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值. 简单的绑定 首先还是先定义一个ViewModel var AppViewModel = { shou ...

  3. Knockout与Require框架同时使用时的visible绑定的问题,造成的影响,以及解决的方法。

    Knockout 可以将 visible 绑定到DOM 元素上,使得该元素的hidden 或visible 状态取决于绑定的值. 查看以下knockout的描述,http://knockoutjs.c ...

  4. Knockout v3.4.0 中文版教程-10-绑定-控制文本内容和外观-visible绑定

    4.绑定 1. 控制文本内容和外观 1. visible绑定 目的 visible绑定可以根据你传入绑定的值控制关联的DOM元素显示或隐藏. 例子 <div data-bind="vi ...

  5. visible绑定(The "visible" binding)

    对visible进行绑定可以控制元素的显示和隐藏. 示例: <div data-bind="visible: shouldShowMessage"> You will ...

  6. Knockout.js Visible绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  7. knockout之各种数据绑定方法:text、attr、visible、html、css、style绑定

    http://knockoutjs.com/documentation/attr-binding.html(Knockout官网文档) 1.text绑定 目的:text 绑定到DOM元素上,使得该元素 ...

  8. knockoutJS学习笔记05:控制文本和外观绑定

    测试数据: function Person(name,age){ var self = this; self.name = ko.observable(name); self.age = ko.obs ...

  9. MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定

    返回目录 Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去 ...

随机推荐

  1. CCNA 4.14 TP Correction

    All people seem to need data processing ( Application presentation session transport network data li ...

  2. Matlab:max函数

    Matlab中max函数在矩阵中求函数大小的实例如下: C = max(A)返回一个数组各不同维中的最大元素.如果A是一个向量,max(A)返回A中的最大元素.如果A是一个矩阵,max(A)将A的每一 ...

  3. javascript prototype 剖析

    学过javascript的一定对prototype不陌生,但是这个究竟是个什么东西,就不一定很清楚. 我们先对prototype进行一个定义:每个函数都有一个prototype属性,这个属性是指向一个 ...

  4. HTML--9表单和验证事件

    1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...

  5. ZOJ 3329 - One Person Game

    题意:每次筛三个骰子面分别为k1,k2,k3,如果三个骰子的值分别为a,b,c则得分置0,否则得到分数加上三个骰子的值的和,如果得分大于等于n则结束游戏. 设E[i]表示当前得到i分时结束游戏的期望. ...

  6. (function($){...})(jQuery) 含义

    最近在项目js文件末端中发现这样的代码,对于前端技术比较薄弱的我,着实还是有点晕,好在查阅到了相关资料,现解释如下: (function($){  $.plugin = new org.plugin. ...

  7. Repeater分页

    void BindData()        {            PagedDataSource pds = new PagedDataSource();                     ...

  8. pyMagic:用python控制的Geek入门神器

    大学四年快要结束了,这几年也学习了一点新的姿势.最近一直在跟国外的micropython项目,这个项目是由剑桥大学的理论物理学家(theoretical physicist)Damien George ...

  9. ios--NSCalendar NSDateComponents

    原文: ios时间那点事--NSCalendar NSDateComponents http://my.oschina.net/yongbin45/blog/156181 目录[-] iOS时间那点事 ...

  10. C++读入二进制数并转换为十进制输出

    题目描述 已知一个只包含0和1的二进制数,长度不大于10,将其转换为十进制并输出. 输入描述 输入一个二进制整数n,其长度不大于10 输出描述 输出转换后的十进制数,占一行 样例输入 样例输出 sol ...