ko 简单例子

Knockout是在下面三个核心功能是建立起来的:
  1. 监控属性(Observables)和依赖跟踪(Dependency tracking)
  2. 声明式绑定(Declarative bindings)
  3. 模板(Templating)
工作中,最重要的是建模,模型建好了,能减少很多的工作和代码,只要着重于维护好自己的模板。
用好它的依赖关系可以使连动很省事,不用操作dom元素,全部都是dom bind ,使页面和数据相分离,结构更清晰,更易于维护
简单例子:
html:<p>First name: <input data-bind="value: firstName"/></p><p>Last name: <input data-bind="value: lastName"/></p><h2>Hello, <span data-bind="text: fullName"> </span>!</h2>javascript:
var viewModel = {    firstName: ko.observable("Planet"),    lastName: ko.observable("Earth")};

viewModel.fullName = ko.dependentObservable(function () {    // Knockout tracks dependencies automatically.     //It knows that fullName depends on firstName and lastName,               //because these get called when evaluating fullName.    return viewModel.firstName() + " " + viewModel.lastName();});

ko.applyBindings(viewModel); // This makes Knockout get to work

eg2:foreach循环输出<table>     <thead>         <tr>             <td>Name</td>             <td>Amount</td>             <td>Price</td>         </tr>     </thead>     <tbody data-bind="foreach: items">         <tr>             <td data-bind="text: product.name"></td>             <td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td>             <td data-bind="text: subTotal"></td>         </tr>     </tbody> </table>
当我改变模型里边的 firstname时,不仅模型里边的值改变了,页面上相应的值也会变。现在项目中用到的:1.ko的依赖属性2.表单验证3.模板等等也可以添加自定义的绑定。
				
时间: 2024-11-06 11:30:19

ko 简单例子的相关文章

从一个简单例子来理解js引用类型指针的工作方式

? 1 2 3 4 5 6 7 <script> var a = {n:1};  var b = a;   a.x = a = {n:2};  console.log(a.x);// --> undefined  console.log(b.x);// --> [object Object]  </script> 上面的例子看似简单,但结果并不好了解,很容易把人们给想绕了--"a.x不是指向对象a了么?为啥log(a.x)是undefined?".&

Hadoop RPC简单例子

jdk中已经提供了一个RPC框架-RMI,但是该PRC框架过于重量级并且可控之处比较少,所以Hadoop RPC实现了自定义的PRC框架. 同其他RPC框架一样,Hadoop RPC分为四个部分: (1)序列化层:Clent与Server端通信传递的信息采用了Hadoop里提供的序列化类或自定义的Writable类型: (2)函数调用层:Hadoop RPC通过动态代理以及java反射实现函数调用: (3)网络传输层:Hadoop RPC采用了基于TCP/IP的socket机制: (4)服务器端

extern外部方法使用C#简单例子

外部方法使用C#简单例子 1.增加引用using System.Runtime.InteropServices; 2.声明和实现的连接[DllImport("kernel32", SetLastError = true)] 3.声明外部方法public static extern int GetCurrentDirectory(int a, StringBuilder b); 4.对外部方法操作  GetCurrentDirectory(300, pathstring); using

事件简单例子

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Runtime.InteropServices; 6 7 namespace EventTest 8 { 9 /// <summary> 10 /// 事件订阅者类 11 /// </summary> 12 class Program 13 { 14 static v

spring mvc(注解)上传文件的简单例子

spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationContext.xml中 <bean id=”multipartResolver” class=”org.springframework.web.multipart.commons.CommonsMultipartResolver”/> 关于文件上传的配置不能少 大家可以看具体代码如下: web.xml &

自定义隐式转换和显式转换c#简单例子

自定义隐式转换和显式转换c#简单例子 (出自朱朱家园http://blog.csdn.net/zhgl7688) 例子:对用户user中,用户名first name和last name进行转换成合成一个限定长度为10个字符新name. 自定义隐式转换: namespace transduction { public partial class transductionForm : Form { public transductionForm() { InitializeComponent();

使用fastjson转换json的简单例子

pom添加依赖: <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.1.41</version> </dependency> 代码: package JsonTest.JsonTest; import java.util.ArrayList; import java.util.Hash

最简单例子图解JVM内存分配和回收

一.简介 JVM采用分代垃圾回收.在JVM的内存空间中把堆空间分为年老代和年轻代.将大量(据说是90%以上)创建了没多久就会消亡的对象存储在年轻代,而年老代中存放生命周期长久的实例对象.年轻代中又被分为Eden区(圣经中的伊甸园).和两个Survivor区.新的对象分配是首先放在Eden区,Survivor区作为Eden区和Old区的缓冲,在Survivor区的对象经历若干次收集仍然存活的,就会被转移到年老区. 简单讲,就是生命期短的对象放在一起,将少数生命期长的对象放在一起,分别采用不同的回收

BIP_Case_以RDF为数据源以RTF为模板的简单例子

一. 汇总    1. 建立rdf报表    2. 开发rtf模板    3. 建立可执行程式    4. 建立并发程式    5. 注册data defination    6. 注册template    7. 运行程式    8. 开发程式中间,需将输出模式修改为xml,产生xml文件,以做rtf开发准备原始数据 二.分步解析1. 建立rdf报表2. 开发rtf模板3. 建立可执行程式4. 建立并发程式5. 注册data defination6. 注册template7. 运行程式8. 开