javascript - 使用 jQote2 的 knockout 模板

Question

我已经开始考虑将 Knockout 供我的团队使用；到目前为止，我对这个框架非常满意，除了它与 jQuery 模板插件的联系，我讨厌它的语法。此外(更重要的是)，我们一直在使用 jQote2 进行客户端模板，因此我想研究创建一个使用它的模板引擎。

我在使用 renderTemplate 函数时遇到困难； jQote2 库似乎不知道如何定位通过 data 参数传入的变量。以前有人处理过这种事情吗？我认为这更多的是 jQote2 的怪癖，而不是 Knockout 呈现其模板的方式......

代码:

jqoteTemplateEngine = function () {
    var templates = {};

    this.createJavaScriptEvaluatorBlock = function (script) {
        return '<%= ' + script + ' %>'; 
    }

    this.getTemplateNode = function (template) {
        var templateNode = document.getElementById(template);
        if (templateNode == null)
            throw new Error("Cannot find template with ID of " + template);
        return templateNode;
    }

    this.renderTemplate = function(templateId, data, options) {
        var renderedMarkup = jQuery.jqote(templates[templateId], data);

        return ko.utils.parseHtmlFragment(renderedMarkup);
    }

    this.rewriteTemplate = function (template, rewriterCallback) {
        var templateNode = this.getTemplateNode(template);

        templates[template] = rewriterCallback(templateNode.text);
    }

    this.isTemplateRewritten = function (templateId) {
        return templateId in templates;
    }
};

jqoteTemplateEngine.prototype = new ko.templateEngine();

ko.setTemplateEngine(new jqoteTemplateEngine());

要点:http://gist.github.com/1341737

Answer 1

我会看一下 KO 1.3 。它处于测试阶段，但相当稳定。 1.3 中有两件重要的事情。现在有一个 native 模板引擎，因此您可以选择避免对外部模板引擎(甚至 jQuery)的任何依赖。与匿名模板的控制流绑定(bind)使这个选项变得更加简单。

其次，它简化了自定义模板引擎的定义方式。因此，如果您仍然想使用外部引擎，那么让它工作会更容易一些。

基本上，如果您希望能够将数据绑定(bind)到模板引擎可用的变量，则只需定义 renderTemplate 方法和 createJavaScriptEvaluatorBlock 即可。其余部分在 ko.templateEngine 基“类”上定义。

因此，您的引擎可能看起来像:

ko.jqoteTemplateEngine = function() {};

ko.jqoteTemplateEngine.prototype = new ko.templateEngine();
ko.jqoteTemplateEngine.prototype.createJavaScriptEvaluatorBlock = function(script) {
    return '<%= ' + script + ' %>';
};

ko.jqoteTemplateEngine.prototype.renderTemplateSource = function(templateSource, bindingContext, options) {
    var templateText = templateSource.text();
    return ko.utils.parseHtmlFragment($.jqote(templateText, bindingContext.$data));
};

ko.setTemplateEngine(new ko.jqoteTemplateEngine());

这是正在使用的示例:http://jsfiddle.net/rniemeyer/yTzcF/