随笔分类 -  Knockout.Js

摘要：之前整理了三篇帖子:Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhendong/p/3596267.htmlKnockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhendong/p/3595949.html Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动 阅读全文

摘要：目的：使用knockout提供的机制实现输入框失去焦点后的校验工作，并使用CSS绑定给未通过校验的输入框添加红色边框突出显示.步骤: 先在htm中添加.error的css样式, 并在输入框中的data-bind属性中添加　event: {blur: ChecktFirstNameIsValid}，和css: { error: !firstNameIsValid()}, 然后再在ViewModel中在firstName监控属性后面再添加一个firstNameIsValid布尔型监控属性, 并给ViewModel添加一个ChecktFirstNameIsValid函数, 在这里检查输入框中的值是否 阅读全文

摘要：目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了．步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNameIsValid()}, 然后再在ViewModel中在firstName监控属性后面再添加一个firstNameIsValid布尔型监控属性, 并给ViewModel添加JQuery失去焦点blur事件, 在这里检查输入框中的值是否符合校验规则, 如果不通过, 就把firstNameIsValid设置为false, 这样, 输入框 阅读全文

摘要：目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件．步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNameIsValid()}, 然后再在ViewModel中在firstName监控属性后面再添加一个firstNameIsValid布尔型监控属性, 并给ViewModel添加一个afterkeydown事件, 在这里检查输入框中的值是否符合校验规则, 如果不通过, 就把firstNameIsValid设置为false, 这样, 输入框就有了红色边框, 如果输入正确, 则把firstNameIsVali 阅读全文

摘要：1.场景：如下图，当选择定期存款时，输入框右边出现红色的必输项星号，当选择活期存款时，不再出现该星号。2.思路一：不使用knockout，直接用click事件，就可以实现这个需求，代码如下： 活期存款 定期存款 定期几年：年 * 3.思路二：使用Knockout的click事件及监控属性.代码如下：htm 活期存款 定期存款 定期几年：年 *jsrequire.config({ paths: { "knockout": "../lib/knockout/knockout-2.3.0", "jquery": "../lib/j 阅读全文

摘要：Knockout 可以将 visible 绑定到DOM 元素上，使得该元素的hidden 或visible 状态取决于绑定的值。查看以下knockout的描述，http://knockoutjs.com/documentation/visible-binding.htmlWhen the parameter resolves to a false-like value (e.g., the boolean value false, or the numeric value 0, or null, or undefined), the binding sets yourElement.styl. 阅读全文

摘要：在一些Knockout例子中，直接在htm中添加scripts写viewmodel，如何能将让ViewModel从htm中剥离出去呢？从knockout官网上找到了解决方法，如下：1.knockout.htm First name: First name capitalized: 2.init.jsrequire(['knockout-2.1.0', 'appViewModel'], function (ko, appViewModel){ ko.applyBindings(new appViewModel());});3.appViewModel.j... 阅读全文