随笔分类 - Knockoutjs
摘要：Knockoutjs可以帮助我们实现复杂的客户端交互，但是在很多的时候我们需要和我们的服务器进行数据交互或者至少将数据序列化到我们的本地存储器。此时我们就可以使用JSON格式数据进行数据的交互和保存了。一、加载和保存数据。Knockoutjs并不强制要求我们使用某个具体的技术来进行数据的读取和保存，我们可以根据自己的需要使用不同的技术，我们经常使用的是JQuery的Ajax方式，比如：getJSON、post和ajax等，我们可以使用下面的方法从服务器取得数据：1 $.getJSON("/some/url", function(data) { 2 // Now use th
阅读全文
摘要：Knockoutjs的控制流程绑定（比如：if和foreach）不仅仅可以绑定在一个真实的DOM元素上，我们也可以将其绑定到一个虚拟的DOM元素上，这个DOM是由一个特殊语法定义的。比如：1 <ul> 2 <li class="heading">My heading</li> 3 <!-- ko foreach: items --> 4 <li data-bind="text: $data"></li> 5 <!-- /ko --> 6 </ul>我们自定义的
阅读全文
摘要：在上一篇文章中我们介绍了如何来创建一个自定义绑定，今天我们就继续来学习如何来控制子绑定(control descendant bindings)。在此之前我们首先说明一下，此项功能相对来说比较高级，通常我们在创建自己的可重用的库时我们才会使用，不是说当我们在使用Knockoutjs创建我们的应用时一定要使用此项功能的。在默认情况下，一个绑定只对它所绑定的element元素起作用。但是如果我们想要此绑定对它所绑定的element的所有子element起作用我们应该怎么办呢？我们在自定义binding的时候我们可以告诉Knockoutjs不绑定他的子元素，这样我们自己定义的绑定就可以以我们喜欢的方
阅读全文
摘要：在使用Knockoutjs时我们并不仅仅限于使用内建的绑定，比如：click、value等，我们可以创建自己的绑定规则。Knockoutjs为我们提供了非常灵活的支持，能够让我们自己去处理非常复杂的业务并且构造出可重用性的绑定。例如我们可以创建交互式的组件，比如表格、网格等。下面我们就来看看怎么一步步创建自定义绑定。一、等级我们的绑定(Registering your binding)我们可以通过ko.bindingHandlers来进行绑定。 1 ko.bindingHandlers.yourBindingName = { 2 init: function(element, val...
阅读全文
摘要：在之前我们对Knockoutjs属性绑定的内容作了相应的介绍，并在介绍的过程中我们应用了很多的例子来说明，在这些例子中我们经常会见到诸如：data-bind、$parent等语法，这些都是Knockoutjs为我们提供的非常强大的绑定语法，今天我们就分别来看一下吧。一、数据绑定(data-bind syntax)Knockoutjs的绑定系统为我们提供了非常强大且简洁的方式让我们将自己的数据和UI连接起来，我们可以非常方便的使用这个绑定语法来进行数据的展示。下面是我们之前一直使用的绑定语法：1 Today's message is: <span data-bind="t
阅读全文
摘要：关于Knockoutjs属性绑定的内容我们基本上已经介绍完了，最后我们再介绍一下属性绑定的最后一个模块，那就是模板绑定(template binding)。我们使用模板绑定的目的就是可以将复杂的页面通过各个模板为我们分别实现，当我们使用这些模板的使用通过模板绑定即可使用，这样对我们页面的编写也是十分方便的，我们使用模板的情况大多是内容是重复性的或者是分块嵌套的，这样对View Model层的数据展示就非常的方便。下面我们就借助几个例子看看怎样使用模板绑定。（1）、使用name来render模板 1 <h2>Participants</h2> 2 Here are the
阅读全文
摘要：我们在使用Knockoutjs最多的时候莫过于使用上次介绍的流程控制(Control flow)和今天将要介绍的表单处理(Working with form fields)了，我们使用表单处理可以帮助我们处理比如事件、验证等功能，下面我们就开始吧。一、click binding使用click binding可以对某一个可见的DOM元素进行事件绑定，当用户点击这个元素时会执行对应的方法，完成相应的功能，我们经常在button、input、a等DOM元素上进行click binding。（1）、下面我们来看一个例子：每当我点击Button之后，点击次数都会加1 1 <script type=
阅读全文
摘要：在上一篇《Knockoutjs属性绑定(Bindings)之控制文本和外观(Controlling text and appearance)》我们介绍了怎么样为View层的组件绑定对应的属性，这篇文章我们接着介绍Knockoutjs的属性绑定，这次我们主要介绍的是怎么样通过Knockoutjs来控制组件的流程显示（比如循环、判断是否显示等）。一、foreach binding使用此功能可以方便我们循环遍历输出某个数组、集合中的内容。（1）、循环遍历输出数组 1 <script type="text/javascript" src="knockout-2.2.
阅读全文
摘要：上次我们通过《Knockoutjs实战开发：属性监控（Observables）和依赖跟踪（Dependency tracking ）》一文对Knockoutjs的属性监控有了初步的了解，在昨天的文章中我们只是对某个属性进行监控介绍，在Knockoutjs中也提供了数组的监控，下面我们首先对数组的监控作下介绍，然后再开始介绍Knockoutjs的属性绑定的控制文本和外观。一、数组监控(Observable Arrays)如果我们想要使用Knockoutjs表示多个值的话我们可以使用数组监控(Observable Arrays)来表示，形式如下：1 var myObservableArray =
阅读全文
摘要：昨天我们通过Knockoutjs环境搭建一文对Knockoutjs进行了简单的了解，我们在使用Js的很多情况下都是为了实现页面的局部刷新从而可以获得数据，使用Knockoutjs的情况也不例外，在Knockoutjs中提供了属性监控(Observables)和依赖跟踪（Dependency tracking）这两个概念，通过它们可以对我们所关心的控件(比如：text文本框)实现动态监控，这样，当空间的值改变或者出现对应的事件是，Knockoutjs可以对其最初相应的反应（此反应不需要刷新页面），从而得到我们想要的结果。下面我们来看一个比较经典的例子：一个人的名字由“姓”和“名”组成，由用户输入
阅读全文
摘要：最近要在项目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的环境搭建，并进行了一个简单的测试。首先要到http://knockoutjs.com/index.html下载最新版本的Knockoutjs，笔者这里下载的是knockout-2.2.0.js。然后新建一个.html文件，在html文档中加入以下的语句导入此js：<script type="text/javascript" src="knockout-2.2.0.js"></script>到这里我们就已经可以编写Knockoutjs的代码了，我们
阅读全文