(一)Knockout - 入门

knockout 简介

knockoutjs的实现依照[MVVM模式],Model-View-ViewModel。

Model,用来聚合server端数据

ViewModel,描述的数据以及操作,是行为的抽象

View,UI层面的状态显示

因此,KO的大致使用思想是:View就是你带有绑定信息的HTML文档,用ViewModel管理这些声明绑定,当任何数据请求返回或者数据变化时,ViewModel启动工作并更新View,开发时只需要着重关注与ViewModel

Demo

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>KO 入门</title>
    <script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
</head>
<body>
    输入值:<input type="text" id="txtValue" data-bind="value: myValue" /><br/>
    响应文本:<span id="spnValue" data-bind="text: myValue"></span>
    <script type="text/javascript">
        var myViewModel =  {
            myValue: ko.observable("walker")
        }
        ko.applyBindings(myViewModel);
    </script>
</body>
</html>

解析:

1.定义了一个 myViewModel组件对象(包含一个myValue的属性)。

2.通过data-bind="value: myValue"将myValue属性绑到<input>的value值。

3.通过data-bind="text: myValue"将属性值动态的反映到<span>中。

时间: 2024-10-19 08:34:33

(一)Knockout - 入门的相关文章

Knockout JS 入门示例

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MyWeb.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="s

knockout.js入门

knockout.js是一个比较老的mvvm框架了,它比angular.js轻量,所以功能不如angular.js强大,它只专注于mvvm,废话不多,直接进入正题. 如何使用: (1),knockout.js的使用依赖于jquery,所以你得在引入knockout.js之前引入jquery. (2),恩,引入了以上2个js文件到你的项目当中之后,你需要定义一个模板函数modelView,如下: 这个函数函数内的每一个属性都是我们后面从后台拿数据的载体,如图片内的sf.Zxpp是一个'可观察的'数

knockout之入门介绍

Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript的前端UI简单化.Knockout是一个以数据模型(data model)为基础的能够帮助你创建丰富文本,响应显示和编辑用户界面的JavaScript类库.任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护. 官网:http://knockoutjs.com 重要特性: 优雅的依赖追踪- 不管任何时候你的数据模型更新,都会自动更新相应的内容.

KnockOut -- 快速入门

简单示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <!-- <span data-bind="text: personName"></span> --> <h3>Meal upgrades</h3> &

avalonjs1.5 入门教程

迷你MVVM框架 avalonjs1.5 入门教程 avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让许多靠政府项目或对兼容性要求够高的公司也能享受MVVM的乐趣.avalon.modern.js支持IE10以上版本,优先使用新API,性能更优,体积更少.avalon.mobile.js在avalon.modern的基础提供了触屏事件的支持,满足大家在移动开发的需求.此外,它们分别存在avalon.

Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践

Atitit. js mvc 总结(2)----angular  跟 Knockout o99 最佳实践 1. 框架 angular 跟Knockout 1 2. 2. 简单的列表绑定:Knockout 1 3. foreach绑定 3 4. Sumup:hesh angular simply 3 1. Mvc优点 angular 功能包括 3 2. 2.1 数据绑定 就是MVVM 结构, 3 3. 2.10 动画效果, ng-animate 4 5. 参考 5 1. 框架 angular 跟K

迷你MVVM框架 avalonjs 入门教程(司徒正美)

迷你MVVM框架 avalonjs 入门教程 关于AvalonJs 开始的例子 扫描 视图模型 数据模型 绑定属性与动态模板 作用域绑定(ms-controller, ms-important) 模板绑定(ms-include) 数据填充(ms-text, ms-html) 类名切换(ms-class, ms-hover, ms-active) 事件绑定(ms-on,……) 显示绑定(ms-visible) 插入绑定(ms-if) 双工绑定(ms-duplex) 样式绑定(ms-css) 数据绑

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js 概念摘录

转自:http://www.cnblogs.com/xishuai/p/mvc-mvp-mvvm-angularjs-knockoutjs-backbonejs-reactjs-emberjs-avalonjs.html MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Contro

knockout 分页 Demo +mvc+bootstrap

最近工作中web客户端需要用到knockout,在此记录下一些Demo,以后用到的时候查找起来方便.也希望给新入门的knockout使用者一点经验.knockout官方文档.这儿是一个使用knockout分页的小demo,使用的框架是mvc,javascript框架有jquery,knockout,bootstrap. 先上效果图  前台view 1 @{ 2 //这儿去除该页面的模板页.防止jquery多次引用,当然也可以不去除,下面jquery就可以不用引用了. 3 4 Layout = n