在一些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. 微信小程序 - 上拉加载更多组件

    详情用例看demo,点击下载示例:loadmore

  2. gson 忽略掉某些字段不进行转换

    增加 transient 修饰进行解决,例如: private  transient final DecimalFormat df = new DecimalFormat("#0.00&qu ...

  3. 一个JAVA的WEB服务器事例

    其实编写一个入门级别的JAVA的WEB服务器,很简单,用SOCKET类即可实现.相关内容可以参考:http://www.cnblogs.com/liqiu/p/3253022.html 一.首先创建一 ...

  4. eclipse/STS 提升注解提示速度

    window -- preference -- 输入content -- java -- editor -- content Assist --auto delay 选项 改为100或者更低  提示速 ...

  5. Android学习笔记二:activity的理解

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7513290.html 一:activity定义了app的页面 一个app有很多个页面组成,一个页面其实就是一个 ...

  6. Python学习笔记五:错误与异常

    一:常见异常与错误 BaseException 所有异常的基类SystemExit 解释器请求退出KeyboardInterrupt 用户中断执行(通常是输入^C)Exception 常规错误的基类S ...

  7. POJ 3268 Bookshelf 2 动态规划法题解

    Description Farmer John recently bought another bookshelf for the cow library, but the shelf is gett ...

  8. Eclipse和MyEclipse使用技巧--MyEclipse下创建的项目导入到Eclipse中详细的图文配置方法

    一.情景再现. 有些人比较喜欢用Myeclipse开发,有些人却比较喜欢用eclipse开发.但是其中有一个问题,Myeclipse里面的项目导入的时候出现了一个小小的问题. 如下: 二.说明问题 导 ...

  9. 微信扫码支付springboot版本

    发布时间:2018-11-06   技术:springboot+freemarker   概述 该项目是一个采用springboot构建的web项目,主要实现了微信扫码支付功能.包含最基本的创建订单, ...

  10. highstock禁用UTC

    xAxis: { labels: { format: '{value:%Y-%m-%d}', /* * 也可以用 formatter 格式化函数,时间格式化说明如下: * %Y 年 * %m 月 * ...