`

knockout使用easytemplate作为默认模板的方法

 
阅读更多

knockout js的模板提供了两个,当引入jquery tmpl时候就默认用了jqueryTmplTemplateEngine

 

可是我不太喜欢jquery的tmpl,觉得源码调试不方便,而且喜欢freemarker的语法,所以就想扩展下ko,使用easyTemplate做为模板。整理如下(SeaJS)下:

 

define(function(require) {
	var ko = require('knockout');

	var Tpl = require('tpl');
	var _ = require('underscore');

	ko.easyTemplateEngine = function () {
		this['allowTemplateRewriting'] = false;
	}

	ko.easyTemplateEngine.prototype = new ko.templateEngine();
	ko.easyTemplateEngine.prototype['renderTemplateSource'] = function (templateSource, bindingContext, options) {
		if(!options || !options.keys)
			return [];

		if(!templateSource || !templateSource.domElement)
			return [];

		var data = bindingContext['$data'];
		var dataTarget = {};

		_.each(options.keys.split(','), function(it){
			var val = data[it];
			dataTarget[it] = typeof val == 'function' ? val() : val;
		});

		var tpl = Tpl.parse(templateSource.domElement.innerHTML, dataTarget);
		return tpl ? ko.utils.parseHtmlFragment(tpl) : [];
	};

	ko.easyTemplateEngine.instance = new ko.easyTemplateEngine();
	ko.setTemplateEngine(ko.easyTemplateEngine.instance);

//	ko.exportSymbol('easyTemplateEngine', ko.easyTemplateEngine);

	return ko;
});

 

其中

Tpl的代码是

define(function(require, exports, module) {
	var fnEasyTpl = require('template');
	var Log = require('log');

	module.exports = {
		// easyTemplate render
		parse: function(tpl, data){
			try{
				var txt = fnEasyTpl(tpl, data).toString();
				// 去掉换行
				if(txt)
					txt = txt.replace(/[\r\n]/g, '');
				return txt;
			}catch(e){
				Log.w(e.message);
				alert(e.message);
				return '';
			}
		}
	};
});
 

 

分享到:
评论

相关推荐

    PS抠图神器:KnockOut 2.88汉化版下载及教程

    PS抠图神器:KnockOut 2.88汉化版下载及教程,1、执行 knockout2.0安装 文件夹中的setup.exe,第一个安装目录默认即可,第二个目录为 photoshop(只支持32位) 安装目录下的plug-ins文件夹; 2、执行 V2.88 Update ...

    TypeScript和Knockout结合使用的例子

    在"TypeScript和Knockout结合使用的例子"中,我们可以学习到如何将这两种技术有效地整合在一起,构建出高效、健壮的前端应用。下面将详细讲解这个结合使用的过程以及相关的知识点: 1. **TypeScript的强类型系统**...

    knockout2.0

    下面我们将详细探讨Knockout2.0的特性、使用方法以及其在图像处理中的重要性。 一、Knockout2.0的核心特性 1. 高精度选择:Knockout2.0采用先进的算法,能够智能识别物体边缘,无论是细腻的毛发还是复杂的透明物体...

    KnockOut 2.88 支持32及64位版.rar

    目前测试使用win10(64位)、photoshop cs6 13.0(32位) 1.下载后放在photoshop安装目录中的Plug-ins中(解压后Plug-ins文件夹中应该会包含:KnockOut.8bf和KnockOut2.88目录) 2.解压到当前位置 3.进入Plug-ins\...

    抠图滤镜knockout2.88安装版(支持win8、win7、XP)

    共2个补丁文件都需要安装,KnockOut 2_P1.exe 默认安装目录为 C:\Program Files\KnockOut 2; KnockOut 2_P2.exe默认安装目录为 *:\…\…\Adobe Photoshop CS5\Plug-ins\Filters。 注意:安装版需要连续输入两次...

    knockout-amd-helpers

    当你在Knockout模板中引用这个组件时,knockout-amd-helpers会自动查找并加载对应的模块,这样你就无需手动管理每个组件的加载顺序了。例如: ```html <!-- 组件的内容 --> ``` 此外,knockout-amd-helpers还...

    knockout seajs .net中实战应用

    在.NET环境中,通常会使用ASP.NET MVC或ASP.NET Core作为后端框架,它们提供丰富的API接口供前端调用。通过Ajax,前端可以向这些接口发送异步请求,获取JSON格式的数据。Knockout的订阅机制可以监听这些数据变化,...

    knockout开发指南

    - **使用监控属性**: 在视图模型中定义并使用监控属性,Knockout会自动处理数据的更改并反映到界面上。 ##### 3.2 使用依赖监控属性 (Dependent Observables) - **定义依赖监控属性**: 使用 `ko.computed()` 函数...

    PS抠图神器:KnockOut 2.88汉化版及教程

    1、执行 knockout2.0安装 文件夹中的setup.exe,第一个安装目录默认即可,第二个目录为 photoshop(只支持32位) 安装目录须设置为Photoshop目录下的/Plug-ins/Filters文件夹中。(若没有Filters文件夹就需要自己...

    knockout抠图实例指南 knockout抠图实例

    本教程共分五课,通过本教程,你可以学会如何使用功力无比的蒙板工具COREL KNOCKOUT,把有细节边缘的(如羽毛,动物皮毛,阴影,头发,烟雾,透明体等)前景对象从背景中"抠"出来,并应用到另一个特定的背景图像中.

    knockout-master.zip

    "knockout-master.zip" 是一个包含Knockout源代码的压缩文件,Knockout是一个流行的JavaScript库,专为构建富交互式的Web应用程序而设计。它利用MVVM(Model-View-ViewModel)模式,帮助开发者轻松地管理DOM元素与...

    KNOCKOUT,PS抠图插件!

    同时,"Readme-说明.htm"包含了详细的使用指南和注意事项,这对于初学者来说尤其重要,因为它能帮助用户更好地理解和掌握这款工具的使用方法,避免在操作过程中出现错误。 虽然KNOCKOUT在某些方面已经显得有些过时...

    扣图滤镜knockout V2.88

    扣图滤镜Knockout V2.88,作为一款著名的专业软件,以其强大的功能和易用性,深受广大设计师和图像处理爱好者的喜爱。这款滤镜特别擅长处理复杂背景下的精细细节,如头发丝等,使得图像的分离和编辑工作变得轻松而...

    Knockout代码

    2. **JavaScript文件**:这里是`Knockout`的主要工作区域,通常定义ViewModel对象,包含数据模型和处理业务逻辑的方法。 3. 可能还有CSS文件,用于定义页面样式。 在ViewModel中,你可以创建 observable 对象,这些...

    KnockOut1.5独立运行版 免安装 免费

    越来越多的人正在使用Photoshop抠图,虽然Photoshop功能越来越强,但体积也越来越庞大,而且Photoshop扣毛发、透明物体比较困难,这却正是KnockOut的强项。KnockOut2.0只是Photoshop的一个滤镜插件,不能独立运行。...

    Knockout 2.0 汉化特别版

    你可以使用`ko.applyBindings`方法指定一个ViewModel对象作为页面的根数据上下文,这样所有的绑定都将在这个上下文中查找数据。 **8. 延展绑定(Custom Bindings)** 虽然内置的绑定已经覆盖了许多常见需求,但...

    mvvm-Knockout的JS和文档

    通过`, data: myData }"></div>`,你可以指定使用哪个模板,并提供数据。 6. **Extensibility**:Knockout.js 设计为可扩展的,可以通过自定义绑定、订阅器和其他扩展点来适应各种需求。 **中文文档的重要性**: ...

    Knockout用法

    4. **模板处理**:提供了一种简便的方法来创建复杂的、可嵌套的UI。 #### 二、声明式绑定(Declarative Bindings) 声明式绑定是Knockout的一个核心特性,它允许开发者使用特定的语法在HTML中直接绑定数据和行为,极...

Global site tag (gtag.js) - Google Analytics