论坛首页 Web前端技术论坛

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

浏览 1607 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-12-03  

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 '';
			}
		}
	};
});
 

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics