由于asp.net，使用插值的下划线模板与淘汰赛一起使用 [英] Using Underscore Template with Knockout using interpolate due to asp.net

问题描述

由于性能原因，我需要使用下划线模板而不是默认的KnockoutJS模板引擎.但是，由于我在asp.net环境中，由于asp.net处理程序，<%和%>的默认标签将不起作用.

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.

正在使用jsFiddle

Working jsFiddle

无法正常运行jsFiddle

Not Working jsFiddle

_.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g
};

使用{{和}}标签

默认情况下，Underscore.js模板引擎使用ERB样式定界符(<%= ... %>).以下是带有下划线的上一示例模板的外观:

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>

这是将Underscore模板与Knockout集成的简单实现.集成代码只有16行，但足以支持Knockout数据绑定属性(以及嵌套模板)和Knockout绑定上下文变量($ parent，$ root等).

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.).

如果您不喜欢<%= ... %>分隔符，则可以将Underscore模板引擎配置为使用您选择的任何其他分隔符.

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.

来自 knockoutjs.com

它声明我可以更改定界符，但未指定任何具体方法...

It states i can change the delimiter but doesn't specify any specifics on how to do it...

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，下划线和淘汰赛.然后在script我只有

Update: I no longer am using the above I simply include jquery, underscore, and knockout. Then in script i just have

_.templateSettings = {
    interpolate: /\{\{([\s\S]+?)\}\}/g
};

但是，没有任何内容被解析.

However, nothing is being parsed.

模板声明为

Template declaration is

<script type="text/html" id="common-table-template">

推荐答案

工作演示jsFiddle

HTML

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屋！