简单的绑定

首先还是先定义一个ViewModel

    var AppViewModel = {
        shouldShowMessage: ko.observable(true)  ///初始化的时候div是visible的     
    };

    AppViewModel.shouldShowMessage = ko.observable(false);   ///现在hidden勒
    ko.applyBindings( AppViewModel);


并且通过ko.applyBindins进行激活Knockout。
然后定义一个UI界面元素
    You will see this message only when "shouldShowMessage" holds a true value.

运行之后此div在初始化的时候还是显示的可以,之后就被重新赋值为false,导致此div被隐藏掉了。
参数:
当参数设置为一个假值时(例如:布尔值false, 数字值0, 或者null, 或者undefined) ,该绑定将设置该元素的style.display值为none,让元素隐藏。它的优先级高于你在CSS里定义的任何display样式。
当参数设置为一个真值时(例如:布尔值true,或者非空non-null的对象或者数组) ,该绑定会删除该元素的style.display值,让元素可见。然后你在CSS里自定义的display样式将会自动生效。
如果参数是监控属性observable的,那元素的visible状态将根据参数值的变化而变化,如果不是,那元素的visible状态将只设置一次并且以后不在更新。
使用函数或者表达式来控制元素的可见性
你也可以使用JavaScript函数或者表达式作为参数。这样的话,函数或者表达式的结果将决定是否显示/隐藏这个元素。例如:

在ViewModel中添加了一个myValues的属性值
同时给myValues的数组添加了一个项
并且在页面UI中绑定了一个元素
      You will see this message only when 'myValues' has at least one member.

就这样当添加完"some value"元素之后,myValues().length>0 则结果为true
那么此div就会显示出来。

Knockout visible绑定使用方法的更多相关文章

  1. Knockout text绑定DOM的使用方法

    本文讲解Knockout text绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数。该绑定在显示<span>或者<em>上非常有用,可以用在任何元素上

  2. Knockout visible绑定使用方法

    本文讲解Knockout让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值,下面有代码参考

  3. angularjs – Knockout foreach vs Angular ng-repeat

    我用Knockout做了什么,我正在尝试使用Angular.在我当前的项目中,我有一个表,通过scroll事件添加数据.当用户向下滚动时,我在表的末尾添加了20行,总行数可以达到2k-10k.我开始显示20条记录,当用户向下滚动时,我会继续添加20行,直到达到总行数.正如在我的Angular小提琴示例中,当使用重复时,如果将新数据推送到数组”Angular’执行所有记录并再次渲染它们但是敲除只是执

  4. angularjs – Angular JS如何比Knockout JS更好或者我更喜欢Angular JS还是Knockout JS?

    >两者的偏好有哪些特征?>两者的使用百分比是多少?>在使用这两者之前我们应该知道什么?这是基于你的需要。

  5. KnockoutJS在AngularJS中的“与”绑定?

    我刚从KnockoutJS切换到AngularJS,我无法在AngularJS中找到KnockoutJS的“with”数据绑定。这是KnockoutJS中的一段代码。“with”绑定创建一个新的绑定上下文,以便后代元素在指定对象的上下文中绑定。没有什么像我知道的..这是我能做的最好的

  6. jquery – ASP.Net MVC与HTML KnockoutJS WebAPI

    我想知道为什么不在ASP.NetMVC4Web项目中使用jQueryjQuery模板的KnockoutJS组合使用基于REST的ASP.NetMVC4WEBAPI.WebAPI可以使用EntityFramework并返回可以使用$.ajax()并使用KnockoutJS绑定的JSON序列化对象.ASP.NetMVC(为网页)提供哪些增加了这个架构的价值?在我头上,我可以想到:>多设备支持>提交的数据的服务器端验证?

  7. Knockout 2.2.0错误与jQuery 1.9

    我复制了一个knockoutjs的例子:当我将jQuery更新为1.9版时,我遇到以下错误:如果有人可以解释这个bug是在jQuery还是KO,我会感激的.解决方法原因你没有使用最新版本的Knockout.以前的版本,2.2.0,与jQuery1.9.x和on不兼容.见thisKnockoutdevthread:Knockout2.2.0usesjQuery.clean()whichisdepre

  8. jquery-mobile – Knockoutjs使用多种视图模式

    如果不是如何使用Knockoutjs与JQM?解决方法整个网站的一个“主”视图模式是可以接受的.那么你可以这样做:或者,您可以调用.applyBindings重载来将绑定应用于单个元素,而不是整个DOM:就个人而言,我推荐第二种方法.

  9. Knockoutjs绑定mouseover或Jquery

    我在jquery中有这个代码.我将如何用绑定的方式将其写入敲门.或者最好在jquery中使用它.有没有聪明的方式知道什么时候在绑定或jquery中写?这是更多的观点,所以也许应该在Jquery?

  10. 使用Jquery更改值时,KnockoutJS属性不会更新

    我有一系列复选框,我想收集所选的一个.复选框在div中,当div被点击时,复选框也应该被检查:这个工作很好,但是KnockoutJS没有拿起这个变化,所以不会更新我所选择的项目上的计数器.我读到你需要触发更改事件的地方.但是当我在复选框上收听更改事件时,实际上会被触发.任何帮助将不胜感激,谢谢!

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部