由于asp.net,使用插值将下划线模板与淘汰赛一起使用 [英] Using Underscore Template with Knockout using interpolate due to asp.net
问题描述
问题
由于性能原因,我需要使用下划线模板而不是默认的 KnockoutJS 模板引擎.但是,由于我在 asp.net 环境中,<%
和 %>
的默认标记将无法工作,因为有 asp.net 处理程序.>
我需要的是应用以下内容:
_.templateSettings = {插值:/{{(.+?)}}/g};
使其使用 {{
和 }}
标签
注意 7:使用 Underscore.js 模板引擎
Underscore.js 模板引擎默认使用 ERB 样式的分隔符(<%= ... %>
).以下是使用 Underscore 时前面示例的模板的外观:
这是将 Underscore 模板与 Knockout 集成的简单实现.集成代码只有 16 行,但足以支持 Knockout 数据绑定属性(以及嵌套模板)和 Knockout 绑定上下文变量($parent、$root 等).
如果您不喜欢 <%= ... %>
分隔符,您可以将 Underscore 模板引擎配置为使用您选择的任何其他分隔符.
来自上面的粗体文档
它声明我可以更改分隔符,但没有指定任何具体的操作方法...
当前尝试
ko.underscoreTemplateEngine = function() {};ko.underscoreTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {renderTemplateSource: 函数 (templateSource, bindingContext, options) {//预编译和缓存模板以提高效率var precompiled = templateSource['data']('precompiled');如果(!预编译){预编译 = _.template("<% with($data) { %>" + templateSource.text() + " <% } %>");templateSource['data']('预编译', 预编译);}//运行模板并将其输出解析为一个 DOM 元素数组var renderMarkup = precompiled(bindingContext).replace(/s+/g, " ");返回 ko.utils.parseHtmlFragment(renderedMarkup);},createJavaScriptEvaluatorBlock:函数(脚本){返回<%="+脚本+%>";}});ko.setTemplateEngine(new ko.underscoreTemplateEngine());
更新:我不再使用上面的我只包括 jquery、下划线和淘汰赛.然后在 script
我只有
_.templateSettings = {插值:/{{([sS]+?)}}/g};
然而,什么都没有被解析.
模板声明是
工作演示 jsFiddle
HTML
人物
<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>是 {{= person.age }} 岁{{ }) }}<p>这表明您可以同时使用 Underscore 风格的计算 (<%= ... %>) <em>和</em>相同模板中的数据绑定属性.</p>
JS
/* ---- 开始将 Underscore 模板引擎与 Knockout 集成.当然可以放在一个单独的文件中.---- */ko.underscoreTemplateEngine = 函数 () { }ko.underscoreTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {renderTemplateSource: 函数 (templateSource, bindingContext, options) {//预编译和缓存模板以提高效率var precompiled = templateSource['data']('precompiled');如果(!预编译){_.templateSettings = {插值:/{{=(.+?)}}/g,转义:/{{-(.+?)}}/g,评估:/{{(.+?)}}/g};预编译 = _.template("{{ with($data) { }} " + templateSource.text() + " {{ } }}");templateSource['data']('预编译', 预编译);}//运行模板并将其输出解析为一个 DOM 元素数组var renderMarkup = precompiled(bindingContext).replace(/s+/g, " ");返回 ko.utils.parseHtmlFragment(renderedMarkup);},createJavaScriptEvaluatorBlock:函数(脚本){返回{{="+脚本+}}";}});ko.setTemplateEngine(new ko.underscoreTemplateEngine());/* ---- 结束 Underscore 模板引擎与 Knockout 的集成 ---- */var viewModel = {人:ko.observableArray([{ 名称:'Rod',年龄:123 },{姓名:'简',年龄:125},])};ko.applyBindings(viewModel);
Issue
I need to use the underscore template instead of the default KnockoutJS template engine due to performance. However, since I'm in an asp.net environment the default tags of <%
and %>
will not work because of the asp.net handler.
What I need is to apply something like the following:
_.templateSettings = {
interpolate : /{{(.+?)}}/g
};
Making it use the {{
and }}
tags
Note 7: Using the Underscore.js template engine
The Underscore.js template engine by default uses ERB-style delimiters (<%= ... %>
). Here’s how the preceding example’s template might look with Underscore:
<script type="text/html" id="peopleList">
<% _.each(people(), function(person) { %>
<li>
<b><%= person.name %></b> is <%= person.age %> years old
</li>
<% }) %>
</script>
Here’s a simple implementation of integrating Underscore templates with Knockout. The integration code is just 16 lines long, but it’s enough to support Knockout data-bind attributes (and hence nested templates) and Knockout binding context variables ($parent, $root, etc.).
If you’re not a fan of the <%= ... %>
delimiters, you can configure the Underscore template engine to use any other delimiter characters of your choice.
Taken from knockoutjs.com
From the above the bold documentation
It states i can change the delimiter but doesn't specify any specifics on how to do it...
Current Attempt
ko.underscoreTemplateEngine = function() {
};
ko.underscoreTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
renderTemplateSource: function (templateSource, bindingContext, options) {
// Precompile and cache the templates for efficiency
var precompiled = templateSource['data']('precompiled');
if (!precompiled) {
precompiled = _.template("<% with($data) { %> " + templateSource.text() + " <% } %>");
templateSource['data']('precompiled', precompiled);
}
// Run the template and parse its output into an array of DOM elements
var renderedMarkup = precompiled(bindingContext).replace(/s+/g, " ");
return ko.utils.parseHtmlFragment(renderedMarkup);
},
createJavaScriptEvaluatorBlock: function(script) {
return "<%= " + script + " %>";
}
});
ko.setTemplateEngine(new ko.underscoreTemplateEngine());
Update:
I no longer am using the above I simply include jquery, underscore, and knockout. Then in script
i just have
_.templateSettings = {
interpolate: /{{([sS]+?)}}/g
};
However, nothing is being parsed.
Template declaration is
<script type="text/html" id="common-table-template">
Working Demo jsFiddle
HTML
<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>
<p>This shows that you can use both Underscore-style evaluation (<%= ... %>) <em>and</em> data-bind attributes in the same templates.</p>
JS
/* ---- Begin integration of Underscore template engine with Knockout. Could go in a separate file of course. ---- */
ko.underscoreTemplateEngine = function () { }
ko.underscoreTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
renderTemplateSource: function (templateSource, bindingContext, options) {
// Precompile and cache the templates for efficiency
var precompiled = templateSource['data']('precompiled');
if (!precompiled) {
_.templateSettings = {
interpolate: /{{=(.+?)}}/g,
escape: /{{-(.+?)}}/g,
evaluate: /{{(.+?)}}/g
};
precompiled = _.template("{{ with($data) { }} " + templateSource.text() + " {{ } }}");
templateSource['data']('precompiled', precompiled);
}
// Run the template and parse its output into an array of DOM elements
var renderedMarkup = precompiled(bindingContext).replace(/s+/g, " ");
return ko.utils.parseHtmlFragment(renderedMarkup);
},
createJavaScriptEvaluatorBlock: function(script) {
return "{{= " + script + " }}";
}
});
ko.setTemplateEngine(new ko.underscoreTemplateEngine());
/* ---- End integration of Underscore template engine with Knockout ---- */
var viewModel = {
people: ko.observableArray([
{ name: 'Rod', age: 123 },
{ name: 'Jane', age: 125 },
])
};
ko.applyBindings(viewModel);
这篇关于由于asp.net,使用插值将下划线模板与淘汰赛一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!