KnockOutJs初次体验

最近忙着一个项目的上线,突然想起好久没上博客园了

跑进来看了一下,好像已经过了有四个月了

想想也是过了蛮久了,所以进来发表一点什么东西

偶然机会看了一个叫KnockOutJs的东西,体验了一下,觉得还是蛮好玩的

首先引用官方的knockoutjs,然后写上js代码

var ViewModel = function(first, middle,last) {
this.firstName = ko.observable(first);
this.middleName=ko.observable(middle);
this.lastName = ko.observable(last);

this.fullName = ko.pureComputed(function() {
return this.firstName() + " " + this.middleName() +" " + this.lastName();
}, this);
};

ko.applyBindings(new ViewModel("Planet", "caigen","Earth")); // 这个就是应用KnowckOutJs

相当于定义一个ViewModel  其实就是一个对象,调用ko.observable进行相关属性的初始化

然后写上html代码进行数据绑定

<div class=‘liveExample‘>
<p>First name: <input data-bind=‘value:firstName‘ /></p>
<p>Middle name:<input data-bind=‘value:middleName‘ /></p>
<p>Last name: <input data-bind=‘value: lastName‘ /></p>
<p>Full name:<span data-bind=‘text:fullName‘></span></p>
</div>

这个框架有什么效果呢

比较神奇就是当对话框内容改变时,绑定的数据也会跟着变化,有意思

时间: 2024-12-26 00:23:33

KnockOutJs初次体验的相关文章

初次体验CentOS 7的systemd

新发布的CentOS 7 中使用systemd服务代替了之前版本的SysV服务,对比下两种启动方式的不同. 修改系统启动级别 旧版 编辑配置文件/etc/inittab,设置启动级别为3 (多用户文字界面),修改initdefault前面的数字为3,保存重启 新版 修改默认启动级别为3 systemctl enable multi-user.target 这个命令实际则是在目录 /etc/systemd/system 下创建了一个软链接 ln -s '/usr/lib/systemd/syste

rMBP 13 初次体验

前两天从 Amazon 购买了第一台 Apple 的笔记本电脑,MacBook Pro with Retina display.配置是官网价格10788那款,实际在亚马逊用9888买下,便宜了900元.Amazon 上几乎所有 Apple 的电脑都比官方教育商店便宜,并且自营很靠谱,推荐一下. 等待送货上门的几天时间里,查了很多开箱文.体验文,说的比较粗糙,所以我再写一遍我这几天的使用体验. 开箱和其他文章没差,略去. MacBook Pro 一如既往的继承了 Apple 的精致.外观非常完美,

Thrift 个人实战--初次体验Thrift

前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还是有一定距离, 本系列将对Thrift作代码解读和框架扩充, 使得它更加贴近生产环境. 本文主要讲解Thrift的初体验, 使得开发者对thrift有个初步的认识. Thrift 软件栈 Thrift对软件栈的定义非常的清晰, 使得各个组件能够松散的耦合, 针对不同的应用场景, 选择不同是方式去搭建

Thrift 个人实战--初次体验Thrift(转)

前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还是有一定距离, 本系列将对Thrift作代码解读和框架扩充, 使得它更加贴近生产环境. 本文主要讲解Thrift的初体验, 使得开发者对thrift有个初步的认识. Thrift 软件栈 Thrift对软件栈的定义非常的清晰, 使得各个组件能够松散的耦合, 针对不同的应用场景, 选择不同是方式去搭建

ASP.NET Core Identity Hands On(1)——Identity 初次体验

ASP.NET Core Identity是用于构建ASP.NET Core Web应用程序的成员资格系统,包括成员资格.登录和用户数据存储 这是来自于 ASP.NET Core Identity 仓库主页的官方介绍,如果你是个萌新你可能不太理解什么是成员资格,那我来解释一下,成员资格由 membership 直译而来, membership 还有会员资格.会员身份.会员全体等相关含义,我们可以将其简单直接但并非十分恰当的理解为用户管理系统 ASP.NET Core Identity(下文简称I

SQL Azure 初次体验

前天才去申请Windows Azure的账号 , 经过一天多的时间后(比想像中快) , 先收到了SQL Azure的invitation code (Windows Azure好像还要再等一段时间) , 赶快上去create 一个 DB , 就命名为TestDB 接着我是用SSMS连的 不过目前SSMS的对象总管没有办法显示 , 所以只能下SQL命令来操作 先创一个Table , 然后简单的insert一些数据进去 第五个我测试insert中文字 , 结果目前好像没办法正确显示(之后测别的也是一

HashTable初次体验

用惯了数组.ArryList,初次接触到HashTable.Dictionary这种字典储存对于我来说简直就是高大上. 1.到底什么是HashTable HashTable就是哈希表,和数组一样,是一种数据储存的方式,但是相对于数组,HashTable属于乱序储存,不会按照输入的顺序进行储存.详情可以参阅MSDN关于HashTable的叙述. 对于HashTable和常用数组的区别,可以在园子里边搜索. 在.NET Framework中,Hashtable是System.Collections命

初次体验百度eCharts遇到的问题和解决方法

前言 上周在厌烦Highchart下,体验了下百度的eCharts,支持IE6.7.8+外,对数据在线编辑还有工具栏支持,体验时遇到了几个小问题,最近两天在尝试得到了一个解决方法. Tooltip时单位问题 在Tooltip里使用formatter解决,设置函数相对复杂些,因为要根据你的Series取值设置,就像一个多维数组一样. 在支持汉字的同时也支持上下标如10<sup>4</sup>t. tooltip: { trigger: 'axis', axisPointer: { /

PyQt5初次体验

今天初次使用了PyQt5,感觉不错. 注意的问题是,PyQt5貌似只支持Python 3 碰到的问题: 没有找到QString类型,貌似是使用的Python的内建str类型.因此无法使用trimmed等方法,而要使用strip()方法. connect方法和C++版本不一样.具体情况见代码. 在Qt5中,没有找到QVBoxLayout的setMargin方法,查找文档发现已经替换成了setContentsMargins方法. OK,看一下代码吧: #!/usr/bin/python3 #codi