<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. 调用阿里云API 的demo示例（java/python）

    Java 示例 // 创建DefaultAcsClient实例并初始化 DefaultProfile profile = DefaultProfile.getProfile(vo.getAliRegi ...

  2. pymongo 学习

    查看一条记录,返回一条 dict 记录 db.Account.find_one({"UserName":"keyword"}) 查看某一列的一条记录(此时的1, ...

  3. “全栈2019”Java第三章：安装开发工具IntelliJ IDEA

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

  4. 安装 luajit && 给 luajit 安装 cjson

    安装 luajit 步骤: 从官网 http://luajit.org/download.html下载  LuaJIT-2.0.5.tar.gz 解压 tar -xzf LuaJIT-2.0.5.ta ...

  5. ElasticSearch关联查找

    ElasticSearch是一个基于Lucene的开源搜索引擎,支持全文检索,提供restful接口.在ES中,提供了类似于MongoDB的面向文档存储服务,这种面向文档的存储非常灵活,但是文档与文档 ...

  6. WebStorm 简单部署服务器进行测试操作

    WebStorm 简单部署服务器对外发布接口 第一步: 查看webstorm防火墙是否允许链接,控制面板-->防火墙-->高级设置 入站规则-->webstrom是否允许链接 ,双击 ...

  7. oracle常用cmd命令

    登陆 sqlplus username/password; 切换: conn username/password; 显示当前登陆用户: show user; 查看用户列表 select usernam ...

  8. python2与python3 的pip的安装

    python2的pip安装 $ sudo apt-get install python-pip python2安装第三方包 $ sudo pip install packagename python3 ...

  9. webpack+vue中安装使用vue-layer弹窗插件

    1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原 ...

  10. C#-语言基础+数据类型+运算符

    一.C#语言基础 新建项目:文件→新建→项目→Visual C#(默认.NET Framework 4.5)→控制台应用程序 1.项目结构 (1)项目后缀 .config ——配置文件(存放配置参数文 ...