knocout搭建静态html,Knockout 官方中文文档 - 爱整理

最新推荐文章于 2021-06-24 00:23:38 发布
最新推荐文章于 2021-06-24 00:23:38 发布
阅读量191 收藏
点赞数
文章标签： knocout搭建静态html

Knockout.js是什么？Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型(data

model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新(...

Knockout的核心类库是纯JavaScript代码实现的，不依赖任何其他类库，所以按照如下步骤即将KO添加到你的项目里：下载Knockout的最新版本，在正式开发和产品使用中，推荐使用默认的压缩版本(knockout.x.x.js)下载地址：http:...

Knockout是建立在以下3个核心功能之上的:1、 属性监控与依赖跟踪 2、 声明式绑定 3、 模版机制在本节中，我们将学习3个核心里面的第一个。但在这之前，先让我们学习一下MVVM设计模式和View Model的概念。Model-View-View Mo...

如果你想发现并响应一个对象的改变，就应该用监控属性(observables)。如果你想发现并响应一个集合的变化，就该用监控属性数组(observableArray)。监控属性数组在显示或编辑多个值以及对界面的一部分重复显示或隐藏(如添加...

计算属性

Computed Observable如果你已经有了一个监控属性firstName和lastName,如果你想显示全名该怎么做呢？这个时候你就可以通过计算属性来实现，这个方法依赖于一个或多个监控属性，如果任何依赖对象发生改变他们就...

可写的计算属性初学者可以跳过这一小节，可写的计算属性相对来说比较高级，在大多数情况下也是没有必要的。正如你上面所学的，计算属性是通过计算其他监控属性而得到的一个值。从这个意义上说，计算属性通常情况下是只读的...

依赖跟踪是如何工作的

初学者可以不必知道这一点，但是高级开发人员可以通过这节来了解依赖监控属性可以通过KO自动跟踪并被更新到UI上。

事实上它是很简单的，甚至简单的有点可爱，跟踪算法是这样的：1、

当你声明一个依赖...

一般的数据绑定有三种:One-Time，One-Way，Two-way。

One-Time绑定模式的意思即为从viewModel绑定至UI这一层只进行一次绑定，程序不会继续追踪数据的在两者中任何一方的变化，这种绑定方式很使用于报表数据，数据仅仅会加载...

目的

Visible绑定通过绑定一个值来确定DOM元素显示或隐藏

示例

You will see this message only when "shouldShowMessage" holds a true value.
果子西施
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Knockout API 中文版
05-20
这个文档是我自己原创制作的，在别的网上肯定是没有的。 而且做得非常好看，和非常准确。 如果下载的人多，将会把中英文对照的版本也上传。 Knockout是一个以数据模型（data model）为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新（比如：更新依赖于用户的行为或者外部数据源的改变），KO能够很简单的帮你实现并且很容易维护。 重要特性: 优雅的依赖追踪 - 不管任何时候你的数据模型更新，都会自动更新相应的内容。 Elegant dependency tracking - automatically updates the right parts of your UI whenever your data model changes. 声明式绑定 - 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上。 Declarative bindings - a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts. 轻易可扩展 - 几行代码就可以实现自定义行为作为新的声明式绑定。 Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code. 额外的好处： 纯JavaScript类库 – 兼容任何服务器端和客户端技术 Pure JavaScript library - works with any server or client-side technology 可添加到Web程序最上部 – 不需要大的架构改变 Can be added on top of your existing web application - without requiring major architectural changes 简洁的 - Gzip之前大约25kb Compact - around 13kb after gzipping 兼容任何主流浏览器 - (IE 6+、Firefox 2+、Chrome、Safari、其它) Works on any mainstream browser - (IE 6+, Firefox 2+, Chrome, Safari, others) 采用行为驱动开发 - 意味着在新的浏览器和平台上可以很容易通过验证。 Comprehensive suite of specifications - (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms 开发人员如果用过Silverlight或者WPF可能会知道KO是MVVM模式的一个例子。如果熟悉 Ruby on Rails 或其它MVC技术可能会发现它是一个带有声明式语法的MVC实时form。换句话说，你可以把KO当成通过编辑JSON数据来制作UI用户界面的一种方式… 不管它为你做什么 Developers familiar with Ruby on Rails, ASP.NET MVC, or other MV* technologies may see MVVM as a real-time form of MVC with declarative syntax. In another sense, you can think of KO as a general way to make UIs for editing JSON data… whatever works for you :) OK, 如何使用它？ 简单来说：声明你的数据作为一个JavaScript 模型对象（model object），然后将DOM 元素或者模板（templates）绑定到它上面. The quickest and most fun way to get started is by working through the interactive tutorials. Once you’ve got to grips with the basics, explore the live examples and then have a go with it in your own project. KO和jQuery (或Prototype等)是竞争关系还是能一起使用？ 所有人都喜欢jQuery! 它是一个在页面里操作元素和事件的框架，非常出色并且易使用，在DOM操作上肯定使用jQuery，KO解决不同的问题。 Everyone loves jQuery! It’s an outstanding replacement for the clunky, inconsistent DOM API we had to put up with in the past. jQuery is an excellent low-level way to manipulate elements and event handlers in a web page. I certainly still use jQuery for low-level DOM manipulation. KO solves a different problem. 如果页面要求复杂，仅仅使用jQuery需要花费更多的代码。 例如：一个表格里显示一个列表，然后统计列表的数量，Add按钮在数据行TR小于5调的时候启用，否则就禁用。jQuery 没有基本的数据模型的概念，所以需要获取数据的数量（从table/div或者专门定义的CSS class），如果需要在某些SPAN里显示数据的数量，当添加新数据的时候，你还要记得更新这个SPAN的text。当然，你还要判断当总数>=5条的时候禁用Add按钮。 然后，如果还要实现Delete功能的时候，你不得不指出哪一个DOM元素被点击以后需要改变。 As soon as your UI gets nontrivial and has a few overlapping behaviors, things can get tricky and expensive to maintain if you only use jQuery. Consider an example: you’re displaying a list of items, stating the number of items in that list, and want to enable an ‘Add’ button only when there are fewer than 5 items. jQuery doesn’t have a concept of an underlying data model, so to get the number of items you have to infer it from the number of TRs in a table or the number of DIVs with a certain CSS class. Maybe the number of items is displayed in some SPAN, and you have to remember to update that SPAN’s text when the user adds an item. You also must remember to disable the ‘Add’ button when the number of TRs is 5. Later, you’re asked also to implement a ‘Delete’ button and you have to figure out which DOM elements to change whenever it’s clicked. Knockout的实现有何不同？ 使用KO非常简单。将你的数据描绘成一个JavaScript数组对象myItems，然后使用模板（template）转化这个数组到表格里（或者一组DIV）。不管什么时候数组改变， UI界面也会响应改变（不用指出如何插入新行或在哪里插入），剩余的工作就是同步了。例如：你可以声明绑定如下一个SPAN显示数据数量（可以放在页面的任何地方，不一定非要在template里）： It’s much easier with KO. It lets you scale up in complexity without fear of introducing inconsistencies. Just represent your items as a JavaScript array, and then use a foreach binding to transform this array into a TABLE or set of DIVs. Whenever the array changes, the UI changes to match (you don’t have to figure out how to inject new TRs or where to inject them). The rest of the UI stays in sync. For example, you can declaratively bind a SPAN to display the number of items as follows: There are <span data-bind="text: myItems().count"></span> items就是这些！你不需要写代码去更新它，它的更新依赖于数组myItems的改变。同样， Add按钮的启用和禁用依赖于数组 myItems 的长度，如下： That’s it! You don’t have to write code to update it; it updates on its own when the myItems array changes. Similarly, to make the ‘Add’ button enable or disable depending on the number of items, just write: <button data-bind="enable: myItems().count < 5">Add</button>之后，如果你要实现Delete功能，不必指出如何操作UI元素，只需要修改数据模型就可以了。 Later, when you’re asked to implement the ‘Delete’ functionality, you don’t have to figure out what bits of the UI it has to interact with; you just make it alter the underlying data model. 总结：KO没有和jQuery或类似的DOM 操作API对抗竞争。KO提供了一个关联数据模型和用户界面的高级功能。KO本身不依赖jQuery，但是你可以一起同时使用jQuery， 生动平缓的UI改变需要真正使用jQuery。
knockout 中文文档 官方文档 打包下载
07-25
这个压缩包包含了官方的中文文档，是学习和掌握KnockoutJS的重要资源。 1. **MVVM模式**：KnockoutJS的核心理念是MVVM，即模型-视图-视图模型。模型是应用程序的数据，视图是用户看到和交互的部分，而视图模型作为...
Knockout简单使用
博客
02-06 650
1. 如何使用Knockoutjs: 在knockoutjs中，每个HTML的DOM对象都是通过data-bind属性来绑定数据的。首先你需要把knockoutjs添加到页面中或者模板中。因为MVC4模板里已经默认添加了knockoutjs，所以我就直接用啦。 开始使用ko(knockoutjs的缩写),首先你需要定义一个viewmodel; 接下来需要做的是，把
knockout+html绑定,动态HTML和knockout.js从Ajax重新绑定HTML请求
weixin_42444974的博客
06-24 246
我有一个问题，我的动态html正在被重新填充，当knockout.js从ajax调用中设置一个可观察数组时。当发生这种情况时，动态HTML被重新加载，导致其中的init函数执行两次并重新绑定其他所有内容。为什么我的html可观察重新绑定动态HTML？我会使用小提琴，但我有很多代码。动态HTML和knockout.js从Ajax重新绑定HTML请求Ajax回调app.viewModel.member...
knockout+html绑定,Knockout.Js官网学习（style绑定、attr绑定）
weixin_39720516的博客
06-24 293
Style绑定style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。(注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。)Style简单示例Profit Informationvar viewModel = {currentProfit:ko.observable(15000)};viewMod...
knockout+html绑定,ko 学习之循环表示 数据绑定(Knockout)
weixin_42306503的博客
06-24 310
AA.cshtml 详细public class TestController : AbstractController{...[HttpGet]public JsonResult GetDetails(int paramA, int paramB){List list = GetList(paramA, paramB);ret...
Knockout-Validation:Knockout JS的验证库
04-12
bower install knockout-validation --save NuGet PM > Install-Package Knockout.Validation NPM npm install knockout.validation --save CDN cdnjs ...
用于在HTML和JavaScript中进行数据绑定的Knockout.js
04-04
压缩包内的文件“Knockout-js-for-data-binding-in-HTML-and-JavaScript.pdf”很可能是一份详细教程或指南，介绍了如何在实际项目中使用Knockout.js来实现数据绑定。这份文档可能涵盖了以下内容： 1. **安装和引入...
knockout-form-validation
04-14
评估这是包含Oracle Cloud Commerce培训课程的模块2的最终项目的初始模板。 该模板的目的是通过使用HTML和CSS的静态示例来节省时间，但没有完成项目所需的任何功能。... 使用Knockout-validations验证表单，创
knockout-validation-bootstrap-tooltip
07-11
这个名为"knockout-validation-bootstrap-tooltip-gh-pages"的压缩包文件很可能包含了实现这一功能的源代码、示例或文档，你可以解压后查看，学习如何将Knockout验证与Bootstrap Tooltip结合使用。这将帮助你提升你...
KnockoutJS中文文档新
07-28
KnockoutJS中文文档新，chm格式的，文档比较新，chm格式也很方便使用
KnockoutJS学习文档中文版
01-23
网上这方面的资料很少,找了大半天才找到这么一个.希望对大家有用
html标签out,html绑定 - Knockout 官方中文文档 - 爱整理
weixin_42144707的博客
06-24 145
目的html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的viewmodel里声明HTML标记并且render的话，那非常有用。例子var viewModel = {details: ko.observable() // Initially blank};viewModel.details("For further details,view the report here...
Knockout中文开发指南(完整版API中文文档) 目录索引
Java_c#
04-23 6196
推荐阅读：https://www.cnblogs.com/smallprogram/p/5976954.htmlhttp://www.cnblogs.com/xqin/tag/easyui/一、下载Knockout的最新版本在正式开发和产品使用中，推荐使用默认的压缩版本（knockout.x.x.js）下载地址：http://knockoutjs.com/downloads/index.html二...
knockout学习笔记
andefine的博客
03-08 449
学习knockout路程中记下的一些容易遗忘和稍微难理解的知识点，学习地址“knockout.js爱整理” 1.&lt;!–ko–&gt;和&lt;!–/ko–&gt;的用法 有时你可能需要使用Knockout在不使用多余的元素的情况下通过text绑定来设置文本内容。例如，在option元素中是不允许存在其他元素的，所以下面的绑定是无法正常工作的。 &lt;select data-bind=...
Knockout.js 体验之旅
热门推荐
WeX5开发工具
07-28 1万+
作者：起步科技前端研究员小茄，专注分享HTML5 App快速开发工具 WeX5 的黑魔法以及各种有趣炫酷的前端技术。 前言什么，你现在还在看knockout.js？这货都已经落后主流一千年了！赶紧去学Angular、React啊，再不赶紧的话，他们也要变out了哦。身旁的90后小伙伴，嘴里还塞着山东的狗不理大蒜包，却依然振振有词地喋喋不休，一脸真诚。是啊，前端发展太快，那边前几年出的框架已是无人问
knockout的使用
weixin_30819163的博客
03-05 156
knockout是纯js库，用于实现前端的mvvm模式。 学习：http://www.aizhengli.com/knockoutjs 1、M Model js对象，包含应用程序数据和操作。 2、V View html的dom对象，用于展示数据。使用data-bind属性和数据绑定。 3、VM View Model 是绑定到dom对象上的用于数据和界面交互的对象，在knocko...
knockout中如何将data-bind为foreach的表格竖向排列
最新发布
04-11
或者您也可以使用Knockout的virtual element（虚拟元素）语法，如下： <!-- ko foreach: { data: items, as: 'item' } --> <div data-bind="text: item"> <!-- /ko --> 这样就会将每个item作为一个竖直方向的块...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值