Question

我正在使用淘汰组件，但我想使用模板网址而不是内联模板。这是我正在使用的组件：

ko.components.register('cat-data', {
    viewModel: {
        createViewModel: function(params, componentInfo) {
            var self = this;

            self.data = (params && params.data) || [];

            return self;
        }
    },
    template: "/Scripts/CatdDataTemplate.html"
});

当我运行时，显示/Scripts/CatdDataTemplate.html而不是实际模板。

Answer 1

作为字符串的模板属性将被knockout解析为要应用的实际模板。如果要从网址加载模板，可以使用自定义加载器执行此操作，如knockout documentation中所定义，引用如下：

如果您的自定义加载程序实现了loadTemplate和/或loadViewModel，   然后您可以将自定义代码插入加载过程。你也可以   使用这些函数来解释自定义配置格式。

例如，您可能希望启用类似的配置格式   以下内容：

ko.components.register('my-component', {
    template: { fromUrl: 'file.html', maxCacheAge: 1234 },
    viewModel: { viaLoader: '/path/myvm.js' } 
});

...你可以使用自定义加载器。

以下自定义加载程序将负责加载模板   使用fromUrl值配置：

var templateFromUrlLoader = {
    loadTemplate: function(name, templateConfig, callback) {
        if (templateConfig.fromUrl) {
            // Uses jQuery's ajax facility to load the markup from a file
            var fullUrl = '/templates/' + templateConfig.fromUrl + '?cacheAge=' + templateConfig.maxCacheAge;
            $.get(fullUrl, function(markupString) {
                // We need an array of DOM nodes, not a string.
                // We can use the default loader to convert to the
                // required format.
                ko.components.defaultLoader.loadTemplate(name, markupString, callback);
            });
        } else {
            // Unrecognized config format. Let another loader handle it.
            callback(null);
        }
    } };   // Register it ko.components.loaders.unshift(templateFromUrlLoader);

来源：http://knockoutjs.com/documentation/component-loaders.html#example-2-a-component-loader-that-loads-external-files-using-custom-code

如何在使用组件时定义模板URL

1 个答案: