在一些Knockout例子中，直接在htm中添加scripts写viewmodel，如何能将让ViewModel从htm中剥离出去呢？从knockout官网上找到了解决方法，如下：

1.knockout.htm

<html>

<head>

    <script type="text/javascript" data-main="init.js" src="require.js"></script>

</head>

<body>

    <p>First name:

        <input data-bind="value: firstName" /></p>

    <p>First name capitalized: <strong data-bind="text: firstNameCaps"></strong></p>

</body>

</html>

2.init.js

require(['knockout-2.1.0', 'appViewModel'], function (ko, appViewModel)

{

    ko.applyBindings(new appViewModel());

});

3.appViewModel.js

define(['knockout-2.1.0'], function (ko) {

    return function appViewModel() {

        this.firstName = ko.observable('Bert');

        this.firstNameCaps = ko.computed(function ()

        {

            return this.firstName().toUpperCase();

        }, this);

    };

});

这样就不必在htm中写一大堆js代码了。

Knockout: 让ViewModel从htm中剥离出去。的更多相关文章

  1. 从WW中剥离一个三维场景框架

    从WW中剥离一个三维场景框架,初步实现的一个.可以绘制一个三角形,但是不能够控制摄像机,没有增加鼠标事件.没有投影,世界变幻之类的东西.以后会不断学习逐步增加进来. 下载地址 下载V1.0.0.2

  2. htm中的 src未指定具体路径的话 默认查找当前文件夹

    htm中的 src未指定具体路径的话 默认查找当前文件夹

  3. 用好JAVA中的函数式接口，轻松从通用代码框架中剥离掉业务定制逻辑

    大家好,又见面了. 今天我们一起聊一聊JAVA中的函数式接口.那我们首先要知道啥是函数式接口.它和JAVA中普通的接口有啥区别?其实函数式接口也是一个Interface类,是一种比较特殊的接口类,这个 ...

  4. MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

    返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...

  5. ViewModel在MVC3中的应用：一个view显示多个model

    在mvc3中,默认是一张数据表对应一个model,一个视图 view只显示一个model. 但是有些时候,我们一个视图上可能需要显示多个model的内容,即一个网页可能要展示多张表的信息,那怎么办呢, ...

  6. ViewModel在MVC3中的应用：实现多字段表格的部分更新

    假设我们有这样一张用户表: public class F_users { [Key] [Display(Name="用户名:")] [Required(ErrorMessage=& ...

  7. 将Error异常日志从普通日志中剥离

    开发过程中经常需要调试和线上环境查看异常日志的需求,但普通消息与异常消息混在一起实在是非常难得找,上则NM的文档够你头痛,所以就将Error级别的日志抽离出来. 本示例采用log4net来配置: 1. ...

  8. 在HTM中显示播放视频

    注意:video中source 源文件地址src替换成你的video路径<html>    <button onclick="playPause();">播 ...

  9. htm 中 <b>和<strong>的区别

    显示上两者没有任何区别,都是粗体<b>:为了加粗而加粗,推荐使用 css font-weight 属性来创建粗体文字.<strong>:为了强调而加粗,表示十分重要.在网页中使 ...

随机推荐

  1. C++ 第十一课 标准c内存函数

    calloc() 分配一个二维储存空间 free() 释放已分配空间 malloc() 分配空间 realloc() 改变已分配空间的大小 calloc 语法:     #include <st ...

  2. 003-Go初探Iris

    1.参考资源:https://iris-go.com/v10/start#Getting-Started 2.首先下载:go get -u github.com/kataras/iris,此处时间较长 ...

  3. 再谈IE的浏览器模式和文档模式[转]

    http://www.cnblogs.com/liuzhendong/archive/2012/04/27/2474363.html 以前在 “IE8兼容视图(IE7 mode)与独立IE7的区别”一 ...

  4. Eclipse经常使用快捷键

    Eclipse经常使用快捷键 1几个最重要的快捷键 代码助手:Ctrl+Space(中文简体操作系统是Alt+/) 高速修正:Ctrl+1 单词补全:Alt+/ 打开外部Java文档:Shift+F2 ...

  5. lambda expressions are not supported at this language level

    IDEA下报错:lambda expressions are not supported at this language level 解决: 1. File -> Project Struct ...

  6. ES6学习笔记六：迭代

    一:迭代器 它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). ES6创造了一种新的遍历命令for. ...

  7. cocos2d-js 3.0 RC0 监听返回键、菜单键、进入后台（home键）、恢复显示等事件

    cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyReleased: function(keyCode, eve ...

  8. PHP5.4 需要添加的configure参数

    ./configure --prefix=/usr/local/php --with-gd=/usr/local/gd --with-jpeg-dir=/usr/local/jpeg --with-p ...

  9. 网站流量分析指标-PV/UV/PR/ip分析及区别

    1.什么是pv? PV(page view),即页面浏览量,或点击量;通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标. 高手对pv的解释是,一个访问者在24小时(0点到24点)内到底看了你 ...

  10. Linux alias别名设置

    alias命令用来设置指令的别名.我们可以使用该命令可以将一些较长的命令进行简化.使用alias时,用户必须使用单引号''将原来的命令引起来,防止特殊字符导致错误. 语法 alias(选项)(参数) ...