3

问题

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

工作的jsFiddle

不工作的jsFiddle

我需要的是应用以下内容：

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

使其使用{{and}}标签

注 7：使用 Underscore.js 模板引擎

Underscore.js 模板引擎默认使用 ERB 样式的分隔符 ( <%= ... %>)。以下是前面示例的模板使用下划线的外观：

<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 等）。

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

取自knockoutjs.com

从上面的粗体文档

它声明我可以更改分隔符，但没有具体说明如何做到这一点......

当前尝试

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我只有

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

但是，没有任何东西被解析。

模板声明是

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

3 回答 3

3

工作演示 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);
于 2013-08-23T21:10:25.880 回答
0

您在问如何更改下划线的分隔符？这个SO 答案似乎有正确的答案。基本上，您可以为嵌套数据定义自己的正则表达式：

_.template("hello <?= name ?>", {"name": "Mike"}, {"interpolate": /<?=([\s\S]+?)%>/g) ?>})

一些旁注：

您说出于性能原因，您使用的是 Underscore，而不是 Knockout 的本机模板引擎。作为一个狂热的 Knockout 用户，这听起来很可疑。Knockout 的本机模板引擎速度非常快，最终经过测试，远远超过插入 Knockout 的 3rd 方引擎。我用 KO 构建了许多应用程序，并且从未遇到过模板引擎太慢的问题。确保您确实需要使用下划线。对于绝大多数情况，Knockout 的本机模板引擎工作得非常好。

其次，你知道Razor 语法吗？这不会干扰下划线。

于 2013-08-23T19:10:42.090 回答
0

配置是全局的_.templateSettings，所以只需添加块

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

代码中的任何位置。

于 2013-08-23T19:12:29.360 回答