knockout.js模板绑定之利用Underscore.js模板引擎示例
View代码
<h1>People</h1>
<ul data-bind="template: { name: 'peopleList' }"></ul> <script type="text/html" id="peopleList">
<% _.each(people(), function(person) { %>
<li>
<b data-bind="text: person.name"></b> is <%= person.age %> years old
</li>
<% }) %>
</script>
ViewModel
var viewModel = {
people: ko.observableArray([
{ name: 'Rod', age: 123 },
{ name: 'Jane', age: 125 },
])
}; ko.applyBindings(viewModel);
整合underscore模板引擎与knockout.js
1 // 可以单独放在一个js文件中
ko.underscoreTemplateEngine = function () { }
ko.underscoreTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
renderTemplateSource: function (templateSource, bindingContext, options) {
// 预编译和缓存效率的模板
var precompiled = templateSource['data']('precompiled');
if (!precompiled) {
precompiled = _.template("<% with($data) { %> " + templateSource.text() + " <% } %>");
templateSource['data']('precompiled', precompiled);
}
// 运行模板并解析成 DOM elements
var renderedMarkup = precompiled(bindingContext).replace(/\s+/g, " ");
return ko.utils.parseHtmlFragment(renderedMarkup);
},
createJavaScriptEvaluatorBlock: function(script) {
return "<%= " + script + " %>";
}
});
ko.setTemplateEngine(new ko.underscoreTemplateEngine());
在线示例:http://jsfiddle.net/6pStz/
官方说明:http://knockoutjs.com/documentation/template-binding.html
knockout.js模板绑定之利用Underscore.js模板引擎示例的更多相关文章
- 深入解析Backbone.js框架的依赖库Underscore.js的作用
这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- Underscore.js
概述 Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库 ...
- 新手入门Underscore.js 中文(template)
Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...
- (2)Underscore.js常用方法
目录 1.集合相关方法 1.1.数组的处理 map(循环,有返回值),将返回的值依次存入一个新的数组 each(循环,无返回值 ...
- underscore.js源码研究(6)
概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...
- underscore.js源码研究(5)
概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...
- underscore.js源码研究(2)
概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...
- Underscore.js 入门-常用方法介绍
Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库作为自 ...
随机推荐
- [转]八幅漫画理解使用JSON Web Token设计单点登录系统
上次在<JSON Web Token - 在Web应用间安全地传递信息>中我提到了JSON Web Token可以用来设计单点登录系统.我尝试用八幅漫画先让大家理解如何设计正常的用户认证系 ...
- [转]Intellij IDEA快捷键与使用小技巧
Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...
- Manning Hadoop in Practice 翻译【6.2.2】
不是从第一章开始. 6.2.2 Map的困境 技巧 29 鉴别map阶段的数据差异问题 数据差异是非常常见的.在map阶段,数据差异主要以少量不可以分割的大文件或者大量小文件为代表. 问题 你想要确认 ...
- mysql 中只能使用 localhost 登录,用ip不能登陆
解决办法 1 首先使用 localhost 登录 mysql 服务器,如果想要所用ip都可以登录本地mysql 服务器,执行以下授权命令 2 grant all privileges on *.* t ...
- 自适应滤波:维纳滤波器——LCMV及MVDR实现
作者:桂. 时间:2017-03-24 06:52:36 链接:http://www.cnblogs.com/xingshansi/p/6609317.html 声明:欢迎被转载,不过记得注明出处哦 ...
- groupby elasticsearch
GET usertag/usertag/_search { "query": { "match": { "tagname": "春 ...
- [转载]关于generate用法的总结【Verilog】
转载自http://www.cnblogs.com/nanoty/archive/2012/11/13/2768933.html Abtract generate语句允许细化时间(Elaboratio ...
- NLog自定义字段写入数据库表,示例
//自定义字段写入NLog日志 private void saveNLog(InvokeLogModel model) { LogEventInfo ei = new LogEventInfo(); ...
- SQL Server中利用正则表达式替换字符串
--如果存在则删除原有函数 IF OBJECT_ID(N'dbo.RegexReplace') IS NOT NULL DROP FUNCTION dbo.RegexReplace G ...
- password学4——Java 加密解密之消息摘要算法(MD5 SHA MAC)
Java 加密解密之消息摘要算法(MD5 SHA MAC) 消息摘要 消息摘要(Message Digest)又称为数字摘要(Digital Digest). 它是一个唯一相应一个消息或文本的固定长度 ...