在这第一个教程中,您将体验的一些基本知识构建的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. 《JavaScript权威指南》学习笔记 第二天 下好一盘大棋

    前段学习js的时候总是零零散散的,以至于很多东西都模棱两可.时间稍微一久,就容易忘记.最主要的原因是这些东西,原来学的时候就不是太懂,以至于和其他知识无法形成记忆链,所以孤零零的知识特别容易忘记.重温 ...

  2. UIProgressView(进度条控件)

    UIProgressView *pr=[[UIProgressView alloc]init]; pr.frame=CGRectMake(150.0, 190.0, 130.0, 30.0);//进度 ...

  3. Android学习笔记——LinearLayout

    该工程的功能是实现LinearLayout 以下的代码是MainActivity.java中的代码 package com.example.linearlayout; import android.a ...

  4. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【九】——API变了,客户端怎么办?

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 一旦我们将API发布之后,消费者就会开始使用并和其他的一些数据混在一起.然而,当新的需求出现 ...

  5. css 常用代码解析

    .cBan_1 .e2-pro li a{ display: block; -webkit-transition: all 0.3s linear;transition: all 0.3s linea ...

  6. GoLang之网络

    GoLang之网络 Go语言标准库里提供的net包,支持基于IP层.TCP/UDP层及更高层面(如HTTP.FTP.SMTP)的网络操作,其中用于IP层的称为Raw Socket. net包的Dial ...

  7. yii2权限控制rbac之rule详细讲解(转)

    在我们之前yii2搭建后台以及rbac详细教程中,不知道你曾经疑惑过没有一个问题,rule表是做什么的,为什么在整个过程中我们都没有涉及到这张表? 相信我不说,部分人也都会去尝试,或百度或google ...

  8. django_web代码更新

  9. Java并发编程核心方法与框架-phaser的使用

    arriveAndAwaitAdvance()方法 arriveAndAwaitAdvance()作用是当前线程已经到达屏障,在此等待一段时间,等条件满足后继续向下一个屏障执行. public cla ...

  10. 1.Redis安装(转)

    Redis的官网为: http://redis.io/. 1.Redis安装 redis的安装非常的简单,而且Redis并不依赖其他环境和标准库,很容易上手,这可能也是它流行的一个原因.这里为了测试方 ...