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模板引擎示例的更多相关文章

  1. 深入解析Backbone.js框架的依赖库Underscore.js的作用

    这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依 ...

  2. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  3. Underscore.js

    概述 Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库 ...

  4. 新手入门Underscore.js 中文(template)

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

  5. (2)Underscore.js常用方法

    目录 1.集合相关方法        1.1.数组的处理                map(循环,有返回值),将返回的值依次存入一个新的数组                each(循环,无返回值 ...

  6. underscore.js源码研究(6)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  7. underscore.js源码研究(5)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  8. underscore.js源码研究(2)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  9. Underscore.js 入门-常用方法介绍

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

随机推荐

  1. [转]八幅漫画理解使用JSON Web Token设计单点登录系统

    上次在<JSON Web Token - 在Web应用间安全地传递信息>中我提到了JSON Web Token可以用来设计单点登录系统.我尝试用八幅漫画先让大家理解如何设计正常的用户认证系 ...

  2. [转]Intellij IDEA快捷键与使用小技巧

    Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...

  3. Manning Hadoop in Practice 翻译【6.2.2】

    不是从第一章开始. 6.2.2 Map的困境 技巧 29 鉴别map阶段的数据差异问题 数据差异是非常常见的.在map阶段,数据差异主要以少量不可以分割的大文件或者大量小文件为代表. 问题 你想要确认 ...

  4. mysql 中只能使用 localhost 登录,用ip不能登陆

    解决办法 1 首先使用 localhost 登录 mysql 服务器,如果想要所用ip都可以登录本地mysql 服务器,执行以下授权命令 2 grant all privileges on *.* t ...

  5. 自适应滤波:维纳滤波器——LCMV及MVDR实现

    作者:桂. 时间:2017-03-24  06:52:36 链接:http://www.cnblogs.com/xingshansi/p/6609317.html 声明:欢迎被转载,不过记得注明出处哦 ...

  6. groupby elasticsearch

    GET usertag/usertag/_search { "query": { "match": { "tagname": "春 ...

  7. [转载]关于generate用法的总结【Verilog】

    转载自http://www.cnblogs.com/nanoty/archive/2012/11/13/2768933.html Abtract generate语句允许细化时间(Elaboratio ...

  8. NLog自定义字段写入数据库表,示例

    //自定义字段写入NLog日志 private void saveNLog(InvokeLogModel model) { LogEventInfo ei = new LogEventInfo(); ...

  9. SQL Server中利用正则表达式替换字符串

    --如果存在则删除原有函数  IF OBJECT_ID(N'dbo.RegexReplace') IS NOT NULL       DROP FUNCTION dbo.RegexReplace  G ...

  10. password学4——Java 加密解密之消息摘要算法(MD5 SHA MAC)

    Java 加密解密之消息摘要算法(MD5 SHA MAC) 消息摘要 消息摘要(Message Digest)又称为数字摘要(Digital Digest). 它是一个唯一相应一个消息或文本的固定长度 ...