百度360必应搜狗淘宝本站头条
ug5 0软件免费下载右键菜单清理flac文件grub4doss spline
当前位置：网站首页 > 技术文章 > 正文

数据双向绑定库——knockout.js（实现数据双向绑定）

cac55 2024-11-13 09:33 15 浏览 0 评论

1、knockout简介

knockout是一个轻量级的UI类库, 通过MVVM模式使JavaScript前端UI简单化

knockout有四大重要概念：

1）声明式绑定：使用简明移读的语法很容易地将模型(model)数据关联到dom元素上。

2）UI界面自动刷新：当宁的模型状态(model state)改变时, 您的UI将自动更新

3）依赖跟踪：为转变和联合数据, 在你的模型数据之间隐式建立关系

4）模板：为你的模型数据快速编写复杂的可嵌套的UI

官网:

https://knockoutjs.com/

https://github.com/knockout

使用案例:

https://knockoutjs.com/examples/

2、knockout特性和好处

特性：

优雅的依赖跟踪

声明式绑定

灵活全面的模板

轻易可扩展

好处：

纯javascript类库(兼容任何服务器端和客户端技术)

可添加到web程序最上部(不需要大的架构改变)

简洁的

兼容任何主流浏览器

3、如何使用knockout

声明你的数据作为一个javascript模型对象（model object）,然后dom元素或者模板（templates）绑定到它上面。

下面简介怎样简单使用knockout.js例子

1、现在官网下载最新的knockout.js， 地址： http:www.knockoutjs.com

2、引入knockout.js应注意那些问题

1)用标签<script> src属性引入路径下的knockout.js

2)<script type="text/javascript" src = "js/knockout.js">内容</script>整个放在html文本后面, 放到head里面读取不到js, 所以绑定不到值

实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>knockout的用法</title>
</head>
<body>
用户名称：<span id="username" data-bind="text:username"></span><br/>
用户密码：<span id="password" data-bind="text:password"></span><br/>
邮箱地址：<span id="email" data-bind="text:email"></span><br/>
用户住址：<span id="address" data-bind="text:address"></span><br/>
商品名称：<span id="prodName"></span><br/>
</body>
</html>
<script type="text/javascript" src="js/knockout-3.4.0.js"></script>
<script type="text/javascript">
document.getElementById("prodName").innerHTML="护目镜";
//声明的一个javascript模型对象，对应webform中的类对象
　　 var testjson = {
username:"zhangsan",
password:"1234567",
email:"zhangsan@123.com",
address:"广州天河区"
};
ko.applyBindings(testjson);
</script>
数据双向绑定库

相关推荐

正点原子开拓者FPGA开发板资料连载第四十章 SD卡图片显示实验

1）实验平台：正点原子开拓者FPGA开发板2）摘自《开拓者FPGA开发指南》关注官方微信号公众号，获取更多资料：正点原子3）全套实验源码+手册+视频下载地址：http://www.openedv.c...

东芝存储改名为铠侠了，铠侠microSD卡128GB全网首测

作为一个数码爱好者，平时总爱把玩各种科技数码产品，最近又迷上了口袋云台相机，大疆OsmoPocket、飞宇口袋相机、SnoppaVmate口袋相机什么的，不过这类产品由于设计的机身体积很小（毕竟为...

SD存储卡卡面上奇奇怪怪的图标，你知道几个?

现在对高像素照片、连拍、4K甚至8K的需求越来越多，对存储卡的传输速度、容量等，要求也越来越多了。但是，看到SD存储卡卡面上奇奇怪怪的图标，让人非常迷惑。这篇文章让你简单认识这些图标和奇奇怪怪的数字。...

拍摄4K视频上选!铠侠 EXCERIA PLUS microSD卡

大家好，我是波导终结者。今天跟大家分享的是铠侠的EXCERIAPLUS极至光速microSDXCUHS-1存储卡，名字有点长，但是不用担心，我会帮大家梳理好存储卡的选购建议。有不少刚入门的朋友...

高速稳定，一卡多用:铠侠极至光速microSD存储卡评测

Hello，大家好，我是小胖子。半个月前收到了KIOXIA铠侠寄来的一张256GB的TF卡，用了大半个月，让我们看看这款产品表现如何吧。其实很多人并不太了解铠侠，问我铠侠是什么品牌，好不好。其实，东芝...

读速205MB/s、V30规格，雷克沙SILVER系列存储卡再添新成员

IT之家6月19日消息，雷克沙今日推出3款SILVER系列SD/microSD存储卡新品，支持4K60fps录像。据介绍，该系列存储卡均符合V30标准，其中micr...

相机、无人机拍视频，选择SD存储卡有什么需要知道的?

本文章不涉及产品推荐导购行为，致力于给到小白带来基础知识。相机一般使用SD卡，无人机一般使用microSD卡（也叫TF卡），使用的标准和图标标识是一样的。相机、无人机拍视频，选择SD存储卡有什么需要知...

PNY推出适用Switch 2的microSD Express卡，读取速度高达890MB/s

任天堂Switch2开始预订，其比前代产品变得更加昂贵，各种配件的价格都高于预期，这也包括转向microSDExpress存储。此时，PNY推出了新款microSDExpress闪存卡。新款mi...

SD卡迎来25周年:全球售出120亿张，容量翻50万倍

IT之家5月21日消息，科技媒体betanews今天（5月21日）发布博文，报道称SD卡迎来了25周年的生日。自2000年首款SD存储卡问世以来，已走过25个年头...

微单相机买一款什么样的SD卡才够用?写入速度更为关键

最近，评价君朋友发现自己的卡拍摄视频时候总断流，于是感觉写入速度应该是不够的，打算换卡，评价君正好跟他说道说道。目前的SD存储卡，很多只标注读取速度，比如95MB/s，80MB/s等等，而没有写写入速...

金士顿Canvas Go!Plus 系列存储卡评测

前言2020年，金士顿推出了CanvasGo!Plus系列存储卡，凭借其优秀的读写速度和稳定性获得了广大用户的认可。时隔5年，金士顿推出了其全新升级产品:SDG4/SDCG4，可选容量覆盖64GB...

TF卡速度等级|MK米客方德（tf卡速度等级图）

TF卡（TransFlash卡，又称MicroSD卡）是一种常见的便携式存储媒体，广泛用于智能手机、相机、平板电脑等设备中。TF卡的性能通常由速度等级来衡量，这些等级反映了TF卡的数据传输速度。拓优星...

关于SD卡，看这张表就够了（sd卡的作用）

这里是溢图科技（原“相机笔记”）。这两天有不少存储产品促销，随之而来的就是关于SD卡的一些提问。文章以前已经写过很多了，这里主要给大家看一张表格：上面就是SD卡协会官方制作的“族谱”，明确给出了不同版...

轻量化储存的首选——凯侠极致光速256G microSD存储卡实测

对于摄影师而言，我们经常会接触到相关存储设备，像照片拍摄中给相机安装的SD卡，视频录制中外录高规格画面的SSD等，都属于专业的存储介质，被应用于商业拍摄、电影级别拍摄之中。而针对生活中我们日常用于拍摄...

首发1569元，读取速度可达250MB/s，闪迪推出最新2TB至尊超极速存储卡

近日，闪迪（SanDisk）正式发布了其最新的2TB至尊超极速microSDXCUHS-I存储卡。据悉，这款存储卡的读取速度可达250MB/s，写入速度则达到150MB/s。这意味着用户在处理高分辨...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表