作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
由于性能原因,我需要使用下划线模板而不是默认的 KnockoutJS 模板引擎。但是,由于我在 asp.net 环境中,默认标记为 <%
和 %>
由于 asp.net 处理程序,将无法工作。
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
让它使用 {{
和 }}
标签
默认情况下,Underscore.js 模板引擎使用 ERB 样式的分隔符 ( <%= ... %>
)。以下是使用 Underscore 时前面示例的模板的外观:
<script type="text/html" id="peopleList">
<% _.each(people(), function(person) { %>
<li>
<b><%= person.name %></b> is <%= person.age %> years old
</li>
<% }) %>
</script>
这是将 Underscore 模板与 Knockout 集成的简单实现。集成代码只有 16 行长,但足以支持 Knockout 数据绑定(bind)属性(以及嵌套模板)和 Knockout 绑定(bind)上下文变量($parent、$root 等)。
如果您不喜欢 <%= ... %>
分隔符,您可以将 Underscore 模板引擎配置为使用您选择的任何其他分隔符。
它说我可以更改定界符,但没有具体说明如何操作...
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());
更新:我不再使用上面的内容,我只包括 jquery、下划线和 knockout 。然后在script
我只有
_.templateSettings = {
interpolate: /\{\{([\s\S]+?)\}\}/g
};
但是,没有任何内容被解析。
模板声明是
<script type="text/html" id="common-table-template">
最佳答案
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);
关于knockout.js - 由于 asp.net 使用插值将 Underscore 模板与 Knockout 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18410055/
我是一名优秀的程序员,十分优秀!