<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. Chrome71版本使用screenfull.js全屏功能时报参数错误

    在生产环境长期使用的一个“全屏”功能突然失效了,查看Console 如下报错: Failed to execute 'requestFullscreen' on 'Element': paramete ...

  2. django系列6--Ajax05 请求头ContentType, 使用Ajax上传文件

    一.请求头ContentType ContentType指的是请求体的编码类型,常见的类型共有三种: 1.application/x-www-form-urlencoded 这应该是最常见的 POST ...

  3. Android Studio设置字体

    一,点"Settings"按钮,调出配置界面: 然后如图找到 Editor-colors&font-font ,默认的不让修改 所以先点击save as  随便起个名字 , ...

  4. 列表和range、元组

    1.listt.append()默认追加在后面 2.list.insert(索引,“元素”)按索引添加 3.list.extend()可添加多个字或字母的字符串,也可以是列表 4.list.pop() ...

  5. Problem D: GJJ的日常之暴富梦（水题）

    Contest - 河南省多校连萌(四) Problem D: GJJ的日常之暴富梦 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 693  Solve ...

  6. 【OCP-12c】CUUG 071题库考试原题及答案解析（14）

    14.(6-13) choose the best answer:View the Exhibit and examine the structure of the ORDERS table.Whic ...

  7. “全栈2019”Java异常第二十二章：try-with-resources语句详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  8. OWASP JUICE SHOP部分题解

    本文作者:S0u1 0×00 简介 OWASP JUICE SHOP是一个开源的web应用靶场,里面包含了共记47个漏洞挑战任务,囊括了OWASP TOP 10的各个点,是一个很不错的渗透测试练手项目 ...

  9. [Objective-C语言教程]扩展（30）

    类扩展与类别有一些相似之处,但它只能添加到编译时具有源代码的类中(类与类扩展同时编译). 类扩展声明的方法是在原始类的实现块中实现的,因此不能在框架类上声明类扩展,例如Cocoa或Cocoa Touc ...

  10. mxonline实战6 ， 忘记用户密码时进行重置

        对应github地址:密码重置   原理:  1. 一个需要输入用户邮箱和注册码的密码忘记页面 2. 点击提交后,用户邮箱收到一个邮件,包含重置密码的链接 3. 点击链接进入密码重置页面   ...