前言 最近一段时间在网上经常看到关于Knockout.js文章，于是自己就到官网看了下，不过是英文的，自己果断搞不来，借用google翻译了一下。...然后刚刚发现在建立asp.net mvc4.0的应用程序的时候，建完之后我直接在项目的Scripts中看到了 ? 这两个js类库，用谷歌翻译看了下官网，Ko的实现原理是MVVM，比MVC高级一些。...ViewModel包含所有由UI特定的接口和属性，并由一个 ViewModel 的视图的绑定属性，并可获得二者之间的松散耦合，所以需要在ViewModel 直接更新视图中编写相应代码。...开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。 4. 可测试。...开始使用Knockout.js 如果你建立像asp.net mvc 4.0这样的Web应用程序，那么你可以不用任何操作即可以使用Knockout.js,如果你建立其他的项目或许需要引用该类库。
当用户check关联的form表单控件的时候，view model对应的值也会自动更新，相反，如果view model的值改变了，那控件元素的check/uncheck状态也会跟着改变。...简单示例 示例代码 Send me spam: ...Monosodium Glutamate <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.<em>js</em>...如果参数是监控属性observable<em>的</em>，那元素<em>的</em>checked状态将根据参数值<em>的</em>变化而更新，如果不是，那元素<em>的</em>value值将只设置一次并且以后不在更新。
data-bind="text: myMessage"> <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.<em>js</em>...原来<em>的</em>文本将会被覆盖。 如果参数是监控属性observable<em>的</em>，那元素<em>的</em>text文本将根据参数值<em>的</em>变化而更新，如果不是，那元素<em>的</em>text文本将只设置一次并且以后不在更新。 ...例如：如果你编写如下<em>代码</em>： viewModel.myMessage("Hello, world!"); 它不会显示斜体字，而是原样输出标签。...如果你想编写如下的代码的话，那Knockout将不起任何作用： 导航 1.KnockoutJs官网学习（简单了解和入门） 2.Knockout.Js官网学习（监控属性Observables） 3....Knockout.Js官网学习(数组observable) 4.Knockout.Js官网学习（visible绑定）
必须view model的一些属性是observable的，你可以使用KO绑定他们到你的UI元素上，当这些observable值改变的时候，这些UI元素就会自动更新。...使用mapping要引用的Js文件https://github.com/SteveSanderson/knockout.mapping/tree/master/build/output。...最后，用这些数据更新你的view model（不使用mapping插件），代码上面也有，就是 viewModel.serverTime(data.Date);...为了使数据显示在页面上，所有的属性都要像这样写代码。如果你的数据结构很复杂的话（例如，包含子对象或者数组），那就维护起来就相当痛苦。...使用.from/toJSON函数处理JSON字符串和使用.from/toJS函数处理JS对象是等价的。
前言 让visible绑定到DOM元素上，使得该元素的hidden或visible取决于绑定的值。... 运行之后此div在初始化的时候还是显示的可以，之后就被重新赋值为false,导致此div被隐藏掉了。...它的优先级高于你在CSS里定义的任何display样式。...如果参数是监控属性observable的，那元素的visible状态将根据参数值的变化而变化，如果不是，那元素的visible状态将只设置一次并且以后不在更新。...导航 1.KnockoutJs官网学习（简单了解和入门） 2.Knockout.Js官网学习（监控属性Observables） 3.Knockout.Js官网学习(数组observable)
简单说，将一对象放在observableArray 里不会使这个对象本身的属性变化可监控的。当然你自己也可以声明这个对象的属性为observable的，但它就成了一个依赖监控对象了。...3.预加载一个监控数组observableArray 如果你想让你的监控数组在开始的时候就有一些初始值，那么在声明的时候，你可以在构造器里加入这些初始对象。...所以你可以像获取普通的observable的值一样，只需要调用无参函数就可以获取自身的值了。...5.IndexOf和slice indexOf 函数返回的是第一个等于你参数数组项的索引。...例如：myObservableArray.indexOf('Blah')将返回以0为第一个索引的第一个等于Blah的数组项的索引。如果没有找到相等的，将返回-1。
当用户编辑表单控件的时候， view model对应的属性值会自动更新。同样，当你更新view model属性的时候，相对应的元素值在页面上也会自动更新。...简单示例 代码如下对两个input进行value的属性绑定 Login name: Password: <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.<em>js</em>...注意密码<em>的</em>type为password KO设置此参数为元素<em>的</em>value值。之前<em>的</em>值将被覆盖。 ...如果参数是监控属性observable<em>的</em>，那元素<em>的</em>value值将根据参数值<em>的</em>变化而更新，如果不是，那元素<em>的</em>value值将只设置一次并且以后不在更新。
availableCountries"> <script type...这时候你需要设置这个对象的那个属性作为drop-down列表或multi-select列表的text来显示。设置额外的参数optionsText将对象的属性名countryName作为显示的文本。...经典场景：如在更新options的时候想保留原来的已经选择的项。
incrementClickCounter">Click me <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.<em>js</em>...（尽管是合法<em>的</em>）。...me event </script...这特别有用是因为你<em>的</em>自定义事件主要就是操作你<em>的</em>view model，而不是连接到另外一个页面。 当然，如果你想让默认<em>的</em>事件继续执行，你可以在你click<em>的</em>自定义函数里返回true。...防止事件冒泡 默认情况下，Knockout允许click事件继续在更高一层<em>的</em>事件句柄上冒泡执行。例如，如果你<em>的</em>元素和父元素都绑定了click事件，那当你点击该元素<em>的</em>时候两个事件都会触发<em>的</em>。
引言 1.本文不描述MapReduce入门知识，这类知识网上很多，请自行查阅 2.本文的实例代码来自官网 http://hadoop.apache.org/docs/current/hadoop-mapreduce-client.../hadoop-mapreduce-client-core/MapReduceTutorial.html 最后的WordCount v2.0，该代码相比源码中的org.apache.Hadoop.examples.WordCount...要复杂和完整，更适合作为MapReduce模板代码 3.本文的目的就是为开发MapReduce的同学提供一个详细注释了的模板，可以基于该模板做开发。...-------------------------------------------------------------------------------- 官网实例代码（略有改动） WordCount2...= null) { // SkipFile的每一行都是一个需要过滤的pattern，例如\!
但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢？...答案是：你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript objects，能够通知订阅者它的改变以及自动探测到相关的依赖。...监控属性的读操作（read） ///监控属性的读操作（read） alert(myViewModel.personAge); 监控属性的写操作（write） ///监控属性的写操作...2.write — 可选，如果声明将使你的依赖监控属性可写，别的代码如果这个可写功能写入新值，通过自定义逻辑将值再写入各个基础的监控属性上。 ...导航 1.KnockoutJs官网学习（简单了解和入门）
分享给你的朋友，让他们嫉妒你； 分享给你的同事，让他们钦佩你； 分享给你的亲人，让他们关心你； 分享给你的爱人，让他，更爱你！...帮0基础的你分析w3c官网的javascript基础教程及小案例，让喜欢javascript的朋友可以爱上他并能拥抱他！ 07javascript函数 ?
分享给你的朋友，让他们嫉妒你； 分享给你的同事，让他们钦佩你； 分享给你的亲人，让他们关心你； 分享给你的爱人，让他，更爱你！...帮0基础的你分析w3c官网的javascript基础教程及小案例，让喜欢javascript的朋友可以爱上他并能拥抱他！ 03javascript输出 ?
你声明的忽略数组被编译到默认的ignore数组里。...你可以像下面代码一样来维护它： var oldOptions = ko.mapping.defaultOptions().ignore; ko.mapping.defaultOptions...().ignore = ["alwaysIgnoreThis"]; 使用include声明需要map的属性 默认情况下，当map你的view model回到JS对象是时候，只map原始view model...JavaScript对象到this上，你可以这样声明： ko.mapping.fromJS(data, {}, this); 从数据源map 你可以通过多次使用ko.mapping.fromJS 来将多个JS..., bobMappingOptions, viewModel); Map以后的observable数组 map插件map以后生产的observable数组，带有几个额外的函数来处理带有keys的mapping
分享给你的朋友，让他们嫉妒你； 分享给你的同事，让他们钦佩你； 分享给你的亲人，让他们关心你； 分享给你的爱人，让他，更爱你！...帮0基础的你分析w3c官网的javascript基础教程及小案例，让喜欢javascript的朋友可以爱上他并能拥抱他！ 02javascript实现 ?
event绑定 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress，mouseover和mouseout上。...Details <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.<em>js</em>...submit绑定 submit绑定在form表单上添加指定<em>的</em>事件句柄以便该form被提交<em>的</em>时候执行定义<em>的</em>JavaScript 函数。只能用在表单form元素上。 ...当你使用submit绑定<em>的</em>时候， Knockout会阻止form表单默认<em>的</em>submit动作。换句话说，浏览器会执行你定义<em>的</em>绑定函数而不会提交这个form表单到服务器上。...可以很好地解释这个，使用 submit绑定就是为了处理view model<em>的</em>自定义函数<em>的</em>，而不是再使用普通<em>的</em>HTML form表单。
enable绑定 enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input，select，和textarea上非常有用。...cellphoneNumber, enable: hasCellphone"/> Do something disable绑定 disable绑定使DOM元素只有在参数值为 true的时候才disabled。
前言 有时候，在使用ko.mapping.fromJS的时候，可能有必要去使用mapping的高级用法来定义mapping的详细过程，以后定义了，以后再调用的时候就不必再定义了。...这不是我们所期望的，我们期望的是只是把name从Alicw更新成Alicws，不是替换整个item项。发生的原因是，默认情况下mapping plugin插件只是简单地比较数组里的两个对象是否相等。...代码如下： var mapping = { 'children': { key: function(data) {...，mapping插件都会检查数组项的id属性来判断这个数组项是需要合并的还是全新replace的。...它接受一个需要替代的对象以及和create 回调一样的options参数，你应该return更新后的值。
Profit Information <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.<em>js</em>...ko.observable(15000) }; viewModel.currentProfit(-50); ko.applyBindings(viewModel); 简单示例<em>代码</em>...当currentProfit 小于0<em>的</em>时候div<em>的</em>style.color是红色，大于的话是黑色。 该参数是一个JavaScript对象，属性是你<em>的</em>style<em>的</em>名称，值是该style需要应用<em>的</em>值。...应用<em>的</em>style<em>的</em>名字不是合法<em>的</em>JavaScript变量命名 如果你需要应用font-weight或者text-decoration，你不能直接使用，而是要使用style对应<em>的</em>JavaScript名称...你可以设置img<em>的</em>src属性，连接<em>的</em>href属性。使用绑定，当模型属性改变<em>的</em>时候，它会自动更新。
分享给你的朋友，让他们嫉妒你； 分享给你的同事，让他们钦佩你； 分享给你的亲人，让他们关心你； 分享给你的爱人，让他，更爱你！...帮0基础的你分析w3c官网的javascript基础教程及小案例，让喜欢javascript的朋友可以爱上他并能拥抱他！ 06javascript对象 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
