Javascript 在knockoutjs的主页面上调用组件_Javascript_Html_Knockout.js_Knockout 3.0

Javascript 在knockoutjs的主页面上调用组件

javascript html knockout.js

Javascript 在knockoutjs的主页面上调用组件,javascript,html,knockout.js,knockout-3.0,Javascript,Html,Knockout.js,Knockout 3.0,我在使用knockoutjs组件时遇到了一些问题，我将遵循中的示例如何在主页上调用我的小部件组件？我想我可能把代码放错地方了代码： index.html <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=d

我在使用knockoutjs组件时遇到了一些问题，我将遵循中的示例

如何在主页上调用我的小部件组件？我想我可能把代码放错地方了

代码： index.html

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="js/libs/knockout/knockout-3.3.0.js" ></script>
        <script type="text/javascript" src="js/widget.js" ></script>
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

<ul data-bind="foreach: products">
    <li class="product">
        <strong data-bind="text: name"></strong>
        <like-widget params="value: userRating"></like-widget>
    </li>
</ul>

widget.html

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="js/libs/knockout/knockout-3.3.0.js" ></script>
        <script type="text/javascript" src="js/widget.js" ></script>
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

<ul data-bind="foreach: products">
    <li class="product">
        <strong data-bind="text: name"></strong>
        <like-widget params="value: userRating"></like-widget>
    </li>
</ul>

当说明如何使用从外部文件加载组件时，您似乎有点迷失了方向

我想我可能把代码放错地方了

是的，你确实把一些代码放错地方了。让我们让您回到正轨：）

首先，widget.js中的代码与对

ko.components.register的调用一起属于main.js
其次，widget.html中用于视图模型的标记属于index.html
第三，您似乎缺少小部件本身的代码和标记
请看下面的工作示例。我已经在代码上方的注释中列出了每段代码所属的文件
您将不需要通过将模块名称作为第一个参数传入requirejsdefine
函数来定义模块名称，就像我所做的那样：
define("files/widget",...
define("main",...

这只是在那里工作的。如果未提供模块名，则requirejs使用基于文件路径的约定，例如，当给定模块名files/widget
时，requirejs将在名为files的文件夹中查找名为widget.js的文件。请仔细阅读

//这在widget.html中，只有html。
//此示例仅在该代码段中使用define函数。
定义（“text！files/widget.html”，[]，function（）{
返回'\
喜欢吗\
不喜欢\
\
\
您可以\
'
});
//在widget.js中，必须使用define函数。
定义（“文件/小部件”，[]，函数（）{
返回函数（params）{
//数据：值为null、“喜欢”或“不喜欢”
this.chosenValue=params.value；
//行为
this.like=函数（）{
this.chosenValue（'like'）；
}.约束（本）；
this.dislike=函数（）{
这个。chosenValue（‘厌恶’）；
}.约束（本）；
}
});
//下面所有内容都进入main.js
require.config({
路径：{
“淘汰赛”：http://knockoutjs.com/downloads/knockout-3.3.0",
“文本”：https://rawgit.com/requirejs/text/master/text"
}
});
定义（“主”、“敲除”]、函数（ko）{
ko.components.register（‘喜欢或不喜欢’{
视图模型：{
要求：'文件/小部件'
},
模板：{
要求：'text！files/widget.html'
}
});
功能产品（名称、等级）{
this.name=名称；
this.userRating=ko.observable（评级| |空）；
}
函数MyViewModel（）{
此项。产品=[
新产品（“大蒜面包”），
新产品（“痛金巧克力”），
新产品（‘海鸥意大利面’、‘喜欢’）//这一个已经‘喜欢’了
];
}
应用绑定（新的MyViewModel（））；
})






只需将
添加到html中即可。该示例使用require.js
加载viewmodel和模板，但您没有在html中使用它。是否将小部件构造函数和模板放在单独的文件中？如果是这样，那么您将需要使用示例和Dandy建议的require.js
。如果您使用require.js
将所有内容放在一个文件中，这不是正确的方法。“widget.html”不应包含在index.html
文件中，也不应定义为模块。require.js文本插件
将在需要时加载并注入它。@Dandy所有内容都在一个文件中，以使示例在代码段中工作。如果您查看OP下面的文档，那么OP在widget.html中的内容实际上不是组件标记，而是调用组件的标记。所以是的，这应该在index.html中。答案似乎是正确的，但它在一个文件中。不知道哪一部分去了哪里。@MikePhils我已经更新了答案。我在代码中添加了注释，以说明代码的哪个部分属于哪个文件。