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汉化版下载及教程,1、执行 knockout2.0安装 文件夹中的setup.exe,第一个安装目录默认即可,第二个目录为 photoshop(只支持32位) 安装目录下的plug-ins文件夹; 2、执行 V2.88 Update ...
在"TypeScript和Knockout结合使用的例子"中,我们可以学习到如何将这两种技术有效地整合在一起,构建出高效、健壮的前端应用。下面将详细讲解这个结合使用的过程以及相关的知识点: 1. **TypeScript的强类型系统**...
下面我们将详细探讨Knockout2.0的特性、使用方法以及其在图像处理中的重要性。 一、Knockout2.0的核心特性 1. 高精度选择:Knockout2.0采用先进的算法,能够智能识别物体边缘,无论是细腻的毛发还是复杂的透明物体...
目前测试使用win10(64位)、photoshop cs6 13.0(32位) 1.下载后放在photoshop安装目录中的Plug-ins中(解压后Plug-ins文件夹中应该会包含:KnockOut.8bf和KnockOut2.88目录) 2.解压到当前位置 3.进入Plug-ins\...
共2个补丁文件都需要安装,KnockOut 2_P1.exe 默认安装目录为 C:\Program Files\KnockOut 2; KnockOut 2_P2.exe默认安装目录为 *:\…\…\Adobe Photoshop CS5\Plug-ins\Filters。 注意:安装版需要连续输入两次...
当你在Knockout模板中引用这个组件时,knockout-amd-helpers会自动查找并加载对应的模块,这样你就无需手动管理每个组件的加载顺序了。例如: ```html <!-- 组件的内容 --> ``` 此外,knockout-amd-helpers还...
在.NET环境中,通常会使用ASP.NET MVC或ASP.NET Core作为后端框架,它们提供丰富的API接口供前端调用。通过Ajax,前端可以向这些接口发送异步请求,获取JSON格式的数据。Knockout的订阅机制可以监听这些数据变化,...
- **使用监控属性**: 在视图模型中定义并使用监控属性,Knockout会自动处理数据的更改并反映到界面上。 ##### 3.2 使用依赖监控属性 (Dependent Observables) - **定义依赖监控属性**: 使用 `ko.computed()` 函数...
1、执行 knockout2.0安装 文件夹中的setup.exe,第一个安装目录默认即可,第二个目录为 photoshop(只支持32位) 安装目录须设置为Photoshop目录下的/Plug-ins/Filters文件夹中。(若没有Filters文件夹就需要自己...
本教程共分五课,通过本教程,你可以学会如何使用功力无比的蒙板工具COREL KNOCKOUT,把有细节边缘的(如羽毛,动物皮毛,阴影,头发,烟雾,透明体等)前景对象从背景中"抠"出来,并应用到另一个特定的背景图像中.
"knockout-master.zip" 是一个包含Knockout源代码的压缩文件,Knockout是一个流行的JavaScript库,专为构建富交互式的Web应用程序而设计。它利用MVVM(Model-View-ViewModel)模式,帮助开发者轻松地管理DOM元素与...
同时,"Readme-说明.htm"包含了详细的使用指南和注意事项,这对于初学者来说尤其重要,因为它能帮助用户更好地理解和掌握这款工具的使用方法,避免在操作过程中出现错误。 虽然KNOCKOUT在某些方面已经显得有些过时...
扣图滤镜Knockout V2.88,作为一款著名的专业软件,以其强大的功能和易用性,深受广大设计师和图像处理爱好者的喜爱。这款滤镜特别擅长处理复杂背景下的精细细节,如头发丝等,使得图像的分离和编辑工作变得轻松而...
2. **JavaScript文件**:这里是`Knockout`的主要工作区域,通常定义ViewModel对象,包含数据模型和处理业务逻辑的方法。 3. 可能还有CSS文件,用于定义页面样式。 在ViewModel中,你可以创建 observable 对象,这些...
越来越多的人正在使用Photoshop抠图,虽然Photoshop功能越来越强,但体积也越来越庞大,而且Photoshop扣毛发、透明物体比较困难,这却正是KnockOut的强项。KnockOut2.0只是Photoshop的一个滤镜插件,不能独立运行。...
你可以使用`ko.applyBindings`方法指定一个ViewModel对象作为页面的根数据上下文,这样所有的绑定都将在这个上下文中查找数据。 **8. 延展绑定(Custom Bindings)** 虽然内置的绑定已经覆盖了许多常见需求,但...
通过`, data: myData }"></div>`,你可以指定使用哪个模板,并提供数据。 6. **Extensibility**:Knockout.js 设计为可扩展的,可以通过自定义绑定、订阅器和其他扩展点来适应各种需求。 **中文文档的重要性**: ...
4. **模板处理**:提供了一种简便的方法来创建复杂的、可嵌套的UI。 #### 二、声明式绑定(Declarative Bindings) 声明式绑定是Knockout的一个核心特性,它允许开发者使用特定的语法在HTML中直接绑定数据和行为,极...