Question

我开始考虑使用Knockout来支持我的团队使用;到目前为止，我对这个框架非常满意，除了它与jQuery Templates插件的关系，我讨厌它的语法。另外（更重要的是），我们一直在使用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中的两个重要事项。现在有一个本机模板引擎，因此您可以选择避免依赖外部模板引擎（甚至是jQuery）。带有匿名模板的控制流绑定使这个选项更加简单。

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

基本上，如果您希望能够数据绑定到模板引擎可用的变量，则只需要定义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/

使用jQote2的Knockout模板

1 个答案: