在这第一个教程中,您将体验的一些基本知识构建的web UI Model-View-ViewModel使用knockout.js(MVVM)模式。

案例1:添加:data-bind

<p>First name: <strong data-bind="text:firstName">1</strong></p>

<p>Last name: <strong data-bind="text:lastName ">todo</strong></p>

修改视图中的两个<Strong>元素,添加数据绑定属性来显示这个人的名字:\

Js:

function AppViewModel() {
    this.firstName = "1321";
    this.lastName = "Bertington";
} // Activates knockout.js

ko.applyBindings(new AppViewModel());

案例2: Observable

可能你不限于显示静态数据。让我们使用值绑定,以及一些常规的HTML <input>控件,使数据可编辑。

添加以下标记:

<p>First name:<input data-bind="value:firstName"/></p>
<p>Last name: <input data-bind="value:lastName"/></p>

function AppViewModel() {

this.firstName = "1321";
    this.lastName = "Bertington";
}

// Activates knockout.js

ko.applyBindings(new AppViewModel());

现在运行应用程序。当你编辑的文本在一个文本框?   

嗯…显然什么也不会发生。让我们解决……

实际上,当你编辑一个文本框,它更新底层视图模型数据。但由于viewmodel属性只是纯JavaScript字符串,他们没有通知任何人,他们已经改变了,所以UI保持静态。

这就是为什么KO.Js有可见的概念——这些属性,自动将问题通知每当他们的价值变化。

更新你的视图模型使firstName和lastName属性使用ko.observable可见:

function AppViewModel() {

this.firstName =ko.observable("1321");
    this.lastName= ko.observable("Bertington");
}
ko.applyBindings(new AppViewModel());

现在重新运行应用程序和编辑文本框。

不仅这一次你会看到底层的视图模型数据,

当你更新当你编辑,但所有相关的UI更新同步。

 案例3:Defining computed values典型的Computed的例子:

通常,你会想合并或将多个可观察到的值转换为让别人。在这个例子中,您可能需要定义的全名是姓氏+空间+名字。

为了处理这个问题,Ko.JS有一个computed的概念(即计算属性——这些都是引人注目的。,他们通知变化)和基于其他可见的值计算。

添加一个fullName属性视图模型,通过添加下面的代码在AppViewModel,firstName和lastName下面:

function AppViewModel() {

this.firstName =ko.observable("1321");
    this.lastName= ko.observable("Bertington");
    this.fullName=ko.computed(function(){
    return this.firstName()+" "+this.lastName();
    })
}

ko.applyBindings(new AppViewModel());

HTML:

<p>First name:<input data-bind="value:firstName"/></p>
<p>Last name: <input data-bind="value:lastName"/></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>

如果你现在运行应用程序和编辑文本框时,你会发现所有UI元素(包括全称显示)与底层数据保持同步。

它是如何工作的?   

事情保持同步,因为依赖自动跟踪:过去<Strong>取决于fullName,

反过来取决于firstName和lastName,

要么可以改变通过编辑文本框。只要从对象图的任何更改造成的最小的更新都需要带上你的视图模型和可见的UI更新。

案例4:Adding more behavior(绑定事件)

这个案例我们会为个按钮加一些行为:

this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };

看,可以读和写一个变量的值,我们一般叫它函数。

接下来,添加一个按钮到视图,使用点击绑定关联与viewmodel功能点击你只是补充道:

<button data-bind="click: capitalizeLastName">Go caps</button>

接下来,如果你点击了按钮,会发现UI的模型值变成大写了。

最后:简述MVVM

这是一个非常简单的示例,但它确实说明MVVM的一些要点:

1.你有一个干净的,UI的面向对象表示的数据和行为(你的视图模型)ViewModel

2.另外,你有如何显示明显的声明表示,到底该怎么显示(你的视图)View

3.您可以实现任意复杂的行为只是通过更新viewmodel对象。你不必担心DOM元素需要修改/添加/删除,同步的框架会为你去做。

后续教程将带你更深!

Subsequent tutorials will take you much deeper!

Knockout.Js案例一Introduction的更多相关文章

  1. Knockout.Js案例二Working With Lists And Collections

    案例一:Foreach绑定 通常,您要生成重复的UI元素,特别是当显示列表,用户可以添加和删除元素.KO.JS让你轻松,使用的数组和foreach绑定. 在接下来的几分钟,您将构建一个动态UI保留席位 ...

  2. Knockout.Js案例三单页面应用程序

    <ul data-bind="foreach: folders">      <li data-bind="text: $data">& ...

  3. 【Knockout.js 学习体验之旅】(2)花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  4. 【Knockout.js 学习体验之旅】(3)模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  5. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  6. Knockout.js 组件

    Knockout.js是一个基于MVVM模式的轻量级的前端框架,有多轻?根据官网上面显示的最新版本v3.4.0,仅22kb.能够友好地处理数据模型和界面DOM的绑定,最重要的是,它的绑定是双向的,也就 ...

  7. Knockout.js 初探

    Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的 ...

  8. knockout.js简单实用教程1

    第一次接触knockout是在一年多之前吧.当时是接手了一个别人的项目,在项目中有用到knockout来进行数据的绑定.也就开始学习起来knockout.在之后的项目中也多次用到了这个.在第一次开始学 ...

  9. MVVM大比拼之knockout.js源码精析

    简介 本文主要对源码和内部机制做较深如的分析,基础部分请参阅官网文档. knockout.js (以下简称 ko )是最早将 MVVM 引入到前端的重要功臣之一.目前版本已更新到 3 .相比同类主要有 ...

随机推荐

  1. django rest framework

    Django-Rest-Framework 教程: 4. 验证和权限 作者: Desmond Chen, 发布日期: 2014-06-01, 修改日期: 2014-06-02 到目前为止, 我们的AP ...

  2. Python与C++结构体交互

    需求:根据接口规范,实现与服务端的数据交互 服务端结构体分包头.包体.包尾 包头C++结构体示例如下 typedef struct head { BYTE string1; BYTE string2; ...

  3. 深入JVM-垃圾回收概念与算法

    一.认识垃圾回收 谈到垃圾回收(Garbage Collection,简称GC),GC中的垃圾,特指存在于内存中的.不会再被使用的对象.对于内存空间的管理来说,识别和清理垃圾对象是至关重要的. 二.常 ...

  4. CentOS7安装Ambari

    环境: CentOS7安装两个节点:master.slave1.并配置ssh无密码登录. 步骤: 获取 Ambari 的公共库文件(public repository): wget http://pu ...

  5. SSH原理与运用(一):远程登录

    SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不开它,很多普通用户也每天使用. SSH具备多种功能,可以用于 ...

  6. Java——Selector

  7. 面向对象编程OOP-1

    在下面的例子中, 我们定义了 Student类作为 Person类的子类. 之后我们重定义了sayHello() 方法并添加了 sayGoodBye() 方法 // 定义Person构造器 funct ...

  8. 再谈Jquery Ajax方法传递到action 【转载】

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://cnn237111.blog.51cto.com/2359144/984466 之 ...

  9. js的元素对象

    元素对象(element对象)        ** 要操作element对象,首先必须要获取到element,                       - 使用document里面相应的方法获取  ...

  10. MYSQL的锁介绍,以及死锁发生情况-带例子

    mysql锁能在并发情况下的mysql进行更好的优化 MySQL有三种锁的级别:页级.表级.行级,这3种锁的特性可大致归纳如下: 表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发生锁冲突的概率最高 ...