随笔分类 - Knockoutjs
摘要：1.Knockout.Js官网学习（简介）2.Knockout.Js官网学习（监控属性Observables） Knockout.Js官网学习(数组observable)3.Knockout.Js官网学习（visible绑定） Knockout.Js官网学习（text绑定） Knockout.Js官网学习（html绑定、css绑定） Knockout.Js官网学习（style绑定、attr绑定）4.Knockout.Js官网学习（click绑定） Knockout.Js官网学习（event绑定、submit绑定） Knockout.Js官网学习（enable绑定、disable绑定） Knoc
阅读全文
摘要：使用ignore忽略不需要map的属性如果在map的时候，你想忽略一些属性，你可以使用ignore累声明需要忽略的属性名称集合： var data = {"name":"aehyok","age":"25" }; var mapping = { 'ignore': ["age"] }; var viewModel = ko.mapping.fromJS(data, mapping);这样执行后age不会在viewModel中你声明的忽略数组被编译到默认的ignore数组里。你可以
阅读全文
摘要：前言有时候，在使用ko.mapping.fromJS的时候，可能有必要去使用mapping的高级用法来定义mapping的详细过程，以后定义了，以后再调用的时候就不必再定义了。这里有一些情形，你可能需要使用这些option。使用keys来使对象unique化你有一个JavaScript对象，如下：var data = { name: 'Scot', children: [{ id: 1, name: 'Alicw' }] };并且他已经绑定到viewModel var viewModel = { name: ko.observable("Scot&qu
阅读全文
摘要：前言 Knockout设计成允许你使用任何JavaScript对象作为view model。必须view model的一些属性是observable的，你可以使用KO绑定他们到你的UI元素上，当这些observable值改变的时候，这些UI元素就会自动更新。使用mapping要引用的Js文件https://github.com/SteveSanderson/knockout.mapping/tree/master/build/output。手工mapping显示当前服务器时间和你网站上的当前用户数。你应该使用如下的view model来代表你的这些信息： var viewModel =...
阅读全文
摘要：前言Knockout可以实现很复杂的客户端交互，但是几乎所有的web应用程序都要和服务器端交换数据（至少为了本地存储需要序列化数据），交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程序也是使用这种格式。加载或保存数据Knockout不限制你用任何技术加载和保存数据。你可以使用任何技术和服务器来交互。用的最多的是使用jQuery的Ajax帮助，例如：getJSON，post和ajax。你可以通过这些方法从服务器端获取数据：$.getJSON("/some/url", function (data) { ///可以使用Data来更新ViewModel，并且通过K
阅读全文
摘要：前言你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定（像click，value等）。你可以你封装复杂的逻辑或行为，自定义很容易使用和重用的绑定。例如，你可以在form表单里自定义像grid，tabset等这样的绑定。注册你的绑定添加子属性到ko.bindingHandlers来注册你的绑定： 然后就可以在任何DOM元素上使用了： 你实际上没必要把init和update这两个callbacks都定义，你可以只定义其中的任意一个。update回调当管理的observable改变的时候，KO会调用你的update callback函数，然后传递以下参数：element — 使用这个绑定的.
阅读全文
摘要：selectedOptions绑定selectedOptions绑定用于控制multi-select列表已经被选择的元素，用在使用options绑定的 该参数是数组（或observable数组）。KO设置元素的已选项为和数组里match的项，之前的已选择项将被覆盖。如果参数是依赖监控属性observable数组，那元素的已选择项selected options项将根据参数值的变化（通过push，pop，或其它observable数组方法）而更新，如果不是，那元素的已选择项selected options将只设置一次并且以后不在更新。不管该参数是不是observable数组，用户在multi-.
阅读全文
摘要：前言options绑定控制什么样的options在drop-down列表里（例如： 该参数是一个数组（或者observable数组）。对每个item，KO都会将它作为一个 添加到这可以说是Multi-select listDrop-down list展示的任意JavaScript对象，不仅仅是字符串Destination country: Your country: You have chosen a country with population . optionsCaption有时候，默认情况下不想选择任何option项。但是single-...
阅读全文
摘要：前言checked绑定是关联到checkable的form表单控件到view model上 - 例如checkbox（）或者radio button（） 。当用户check关联的form表单控件的时候，view model对应的值也会自动更新，相反，如果view model的值改变了，那控件元素的check/uncheck状态也会跟着改变。注：对text box，drop-down list和所有non-checkable的form表单控件，用value绑定来读取和写入是该元素的值，而不是checked绑定。简单示例示例代码Send me spam: 运行之后对于checkbox，当参数为..
阅读全文
摘要：前言value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件，和上。当用户编辑表单控件的时候， view model对应的属性值会自动更新。同样，当你更新view model属性的时候，相对应的元素值在页面上也会自动更新。注：如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态，而不是value 值的绑定。简单示例代码如下对两个input进行value的属性绑定Login name: Password: 运行后效果为注意密码的type为passwordKO设置此参数为元素的value值。之前的值将...
阅读全文
摘要：enable绑定enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input，select，和textarea上非常有用。enable简单示例enableBind I have a cellphone Your cellphone number: 这个例子里，“Your cellphone number”后的text box 初始情况下是禁用的，只有当用户点击标签 “I have a cellphone”的时候才可用。声明DOM元素是否可用enabled。非布尔值会被解析成布尔值。例如0和null被解析成false，21和非...
阅读全文
摘要：event绑定event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress，mouseover和mouseout上。简单示例 Mouse over me Details 就是通过在一个div上绑定两个事件，一个鼠标点上去的mouseover让下面的div内容显示出来，另一个是鼠标移出mouseout让下面的div内容再隐藏。你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： event:...
阅读全文
摘要：前言click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。简单示例ClickBind You've clicked times Click me 预览效果 每次点击按钮的时候，都会调用incrementClickCounter()函数，然后更新自动更新点击次数。你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： someObject.someFunction。View model上的函数在...
阅读全文
摘要：Style绑定style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。（注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。）Style简单示例 Profit Information 简单示例代码，运行后发现为红色的字体当currentProfit 小于0的时候div的style.color是红色，大于的话是黑色。该参数是一个JavaScript对象，属性是你的style的名称，值是该style需要应用的值。你可以一次设置多个style值。例如，如果你的view model有一个叫i...
阅读全文
摘要：Html绑定html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。简单示例 这样Html 的EM标签就会显示于此KO设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()的等价内容。关于HTML encoding因为该绑定设置元素的i
阅读全文
摘要：前言text 绑定到DOM元素上，使得该元素显示的文本值为你绑定的参数。该绑定在显示或者上非常有用，但是你可以用在任何元素上。简单绑定Today's message is: KO将参数值会设置在元素的innerText （IE）或textContent（Firefox和其它相似浏览器）属性上。原来的文本将会被覆盖。 如果参数是监控属性observable的，那元素的text文本将根据参数值的变化而更新，如果不是，那元素的text文本将只设置一次并且以后不在更新。 如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()..
阅读全文
摘要：前言让visible绑定到DOM元素上，使得该元素的hidden或visible取决于绑定的值。简单的绑定首先还是先定义一个ViewModel var AppViewModel = { shouldShowMessage: ko.observable(true) ///初始化的时候div是visible的 }; AppViewModel.shouldShowMessage = ko.observable(false); ///现在hidden勒 ko.applyBindings( AppViewModel);并且通过ko.apply...
阅读全文
摘要：前言1.创建一个ViewModel 2.为ViewModel创建一个声明式绑定的简单的ViewThe name is 3.激活Knockoutko.applyBindings(myViewModel);4.查看运行效果Observables监控属性 现在已经知道如何创建一个简单的view model并且通过binding显示它的属性了。但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢？答案是：你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript objects.
阅读全文
摘要：前言最近一段时间在网上经常看到关于Knockout.js文章，于是自己就到官网看了下，不过是英文的，自己果断搞不来，借用google翻译了一下。然后刚刚发现在建立asp.net mvc4.0的应用程序的时候，建完之后我直接在项目的Scripts中看到了这两个js类库，用谷歌翻译看了下官网，Ko的实现原理是MVVM，比MVC高级一些。简介MVVM模式MVVM是Model-View-ViewModel的简写。 WPF的数据绑定与Presentation Model相结合是非常好的做法,使得开发人员可以将View和逻辑分离出来,但这种数据绑定技术非常简单实用，也是WPF所特有的，所以我们又称之为M.
阅读全文