敲除组件小部件模板requirejs.html

knockout component widget template requirejs html

本文关键字：requirejs html 组件 小部      更新时间：2023-11-21

im实现用于淘汰的小部件示例http://knockoutjs.com/documentation/component-overview.html

从外部html加载模板requirejs不适用于我

ko.components.register('like-or-dislike', {
template: { require: 'text!files/component-like-widget.html' }

})；

我把包含模板的html放在外部html中。将"files/"替换为我的相对路径"/views/_leyout"它不起作用我需要一个加载html的text.js文件？有什么例子吗？

user3144678的答案是正确的。您应该在项目中包含文本插件。只是为了澄清如何使用它，我做了一些简单的项目：

项目结构：

project
|-- index.html
|-- app.js
`-- content
    `-- some-content.html

index.html:

<html>
    <head>
    </head>
    <body>
        <script data-main="app.js"src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>
   </body>
</html>

app.js:

requirejs.config({
    paths: {
        "text": "http://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text"
    }
});
requirejs(["text!content/some-text.html"], function (text) {
   alert(text);
});

some-content.html:

<div>just some text</div>

结果将是"只有一些文本"内的警告。

"text.js"是一个插件，您可以从require主页下载。对我来说，对淘汰组件进行配置的最佳方法如下：

config.js

define(['ko'], function (ko) {
    ko.components.register('component-name', { require: 'components/viewmodels/component-name' });
});

组件名称.js

define(['ko', 'text!components/templates/component-name.html'],function (ko, template) {
    var vm = function (params) {
    };
    return {
        viewModel: vm,
        template: template
    };
});

希望有帮助：）

相关文章：