<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="js/jquery-1.11.1.min.js"></script>

    <script src="js/knockout-3.3.0.js"></script>

    <script type="text/javascript">

        function PersonViewModel(name) {

            // Data

            this.name = ko.observable(name);

            this.editing = ko.observable(false);

            // Behaviors

            this.edit = function () { this.editing(true) }

        }

        $(function () {

            ko.applyBindings(new PersonViewModel("Bert Bertington"));

        })

    </script>

</head>

<body>

    <p>

        Name:

    <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>

        <input data-bind="visible: editing, value: name, hasFocus: editing" />

    </p>

    <p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>

</body>

Knockout.js hasFocus的更多相关文章

  1. 【Knockout.js 学习体验之旅】（2）花式捆绑

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

  2. 【Knockout.js 学习体验之旅】（3）模板绑定

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

  3. 【Knockout.js 学习体验之旅】（1）ko初体验

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

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

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

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

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  6. 【原】Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作

    1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1.3)服务端要用MVC框架,要Rest风格 1.4)数据访问要用ORM 2.效果: 2.1)列表 2.2) ...

  7. Knockout.js 组件

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

  8. Knockout.js随手记(8)

    visible, disable, css绑定 这个例子非常简单,主要演示如何通过属性控制html元素的显示与否(visible),可用性(disable)以及根据属性添加相应的CSS样式. 先简单的 ...

  9. Knockout.js随手记(7)

    数组元素的新增/移除事件 前两篇博客已经很清楚的知道knockout.js通过observableArray()数组元素增减,可以实时的反映在UI上.当然我们想在数组增加或移除元素时加上自定义逻辑就好 ...

随机推荐

  1. 基于ASP.NET的MVC框架下的MvcPaper分页控件的使用技术

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using Webdiyer. ...

  2. 【Oracle 12c】最新CUUG OCP-071考试题库（60题）

    60.(16-10) choose the best answer: Evaluate the following SQL commands: SQL>CREATE SEQUENCE ord_s ...

  3. 学习笔记|JSP教程|菜鸟教程

    学习笔记|JSP教程|菜鸟教程 ------------------------------------------------------------------------------------ ...

  4. [Objective-C语言教程]数据封装（27）

    所有Objective-C程序都由以下两个基本要素组成 - 程序语句(代码) - 这是执行操作的程序的一部分,它们被称为方法(函数). 程序数据 - 数据是受程序功能影响的程序信息. 封装是一种面向对 ...

  5. 新版 iPad Pro 弯了，苹果表示这是正常现象……

    简评:苹果上个月才发布的新版 iPad Pro 出问题了.有用户抱怨说,iPad 出现了机身弯曲.然而苹果公司认为这并不会影响性能,所以坚持这不是一个缺陷,emmm-- 虽然苹果公司的品控一直为人称道 ...

  6. Jupyter notebook用法

    参考官网文档:https://jupyter-notebook.readthedocs.io/en/stable/public_server.html 0.介绍jupyter notebook (此前 ...

  7. Django-工程搭建

    -----环境安装 1.创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3   2.安装django pip install django==1.11.11 ...

  8. Python 全栈开发：day3 作业与默写

    # 1.有变量name = "aleX leNb" 完成如下操作:name = 'aleX leNb'# 1)移除 name 变量对应的值两边的空格,并输出处理结果print(na ...

  9. 配置不同站点不同版本PHP

    Apache 配置 1.常规手动部署apache方法(不会apache配置的请先移步看下Apache基本手工配置方法),解压fcgid,取其mod_fcgid.so至modules目录 2.打开htt ...

  10. 洛谷 P2015 二叉苹果树 (树上背包)

    洛谷 P2015 二叉苹果树 (树上背包) 一道树形DP,本来因为是二叉,其实不需要用树上背包来干(其实即使是多叉也可以多叉转二叉),但是最近都刷树上背包的题,所以用了树上背包. 首先,定义状态\(d ...