问题标签 [knockout-components]

我按照以下示例使用 requirejs 将组件打包为单个 AMD 模块：https ://github.com/sumitkm/BuildingSpaUsingKO/tree/Part2

问题是当它在视图模型中调用该函数时添加单击事件时，self 属性不包含视图模型并将其指向窗口。是什么导致了这个问题？顺便说一句，如果它们在没有 requirejs 的情况下加载并且它们是内联的，则不会发生此问题。

索引.html：

需要.config.js

启动.js

定义（['jquery'，'knockout'，'bootstrap']，函数（$，ko）{

greeting.html - 组件模板

greeting.js - 组件视图模型

定义（[“淘汰赛”，“文本！./greeting.html”]，函数（ko，greeterTemplate）{

我正在使用淘汰赛的组件（通过 require.js 加载）来创建登录小部件。

Javascript：

html

组件 Javascript

组件 html 片段：

这一切都很好，但是当我尝试将 observable 移动到 LoginWidgetViewModel 而不是将它们作为参数传递时，它们没有正确绑定到模型。所以当我使用

代替：

我得到：

有什么建议么？

我最近开始学习 HTML/JS，更具体地说是 KnockoutJS。我正在努力理解的概念之一是组件以及如何处理视图模型。这是我遇到的一个例子，并且不确定处理这个问题的正确方法。

我有一个视图模型，我想像一个可重用的小部件一样工作。我将其命名为 widget.viewmodel.js。我还有另一个视图模型，它是整个页面，所以我将其命名为 page.viewmodel.js。当然还有一个小部件模板，我将其称为 widgetTemplate.ko.html。

所以我想做的是在 page.viewmodel.js 内部，我想创建一个 widget.viewmodel.js 来保留引用，因为我计划将订阅者添加到引用以处理需要的更改反映在 page.viewmodel.js 上。

所以对于 page.viewmodel.js 我有

所以这里有几个问题。首先，它不起作用，因为它抱怨它期望视图模型的 applyBinding。

其次，我完全不确定这里的结构是否有意义。我试图通读 KO 教程，但我无法理解它们。

谢谢您的帮助！

我对 Knockout 非常有经验，但这是我第一次使用组件，所以我真的希望我错过了一些明显的东西！我将尝试简化我的用例来解释我的问题。

我有一个名为 Index 的 HTML 和 JS 文件。Index.html 具有组件的数据绑定，而 Index.js 具有ko.components.register调用。

索引.html

索引.js

然后我有另一个 HTML 和 JS 文件 - Section.html 和 SectionViewModel.js。正如您在上面看到的，SectionViewModel 是我指定为组件的视图模型。

Section.html

SectionViewModel.js

作为 SectionViewModel 中的构造函数的一部分，我调用我的 API 以获取填充我的视图模型所需的所有数据。此 API 调用还返回我需要在模板中使用的 HTML（基本上是从 Section.html 中读取的）。

显然，在调用 applyBindings 之前不会调用此构造函数，因此当我进入 API 调用的成功处理程序时，组件上的模板已设置为我的默认文本。

我需要知道的是，我可以更新这个模板吗？如上所示，我在成功处理程序中尝试了以下内容：

这确实将我的默认文本替换为从我的 API 返回的 html（如调试工具中所示），但此更新不会反映在浏览器中。

所以，基本上毕竟，我真正要问的是，有没有办法在绑定后更新组件模板的内容？

我知道解决上述问题的一个选项可能是需要模板，但我确实简化了上述内容并且在它的完整实现中，我无法做到这一点，因此 API 返回 HTML .

非常感谢任何帮助！我目前确实有一个可行的解决方案，但我真的不喜欢我必须构建 JS 代码以使其工作的方式，因此上述解决方案将是理想的。

谢谢。

以下是否有自定义元素等效语法？

当我尝试以下操作时，我的对象DayOfWeekUtilization没有传递给我的组件。而是传入具有 $raw 属性的对象。

我的对象DayOfWeekUtilization有许多不同的属性，所以我不想打破 HTML 中的属性（需要由 Javascript 驱动）。第一种语法有效，但在我的代码中看起来很奇怪，因为我在其他任何地方都使用自定义元素语法。

当我搜索“ Knockout Google Maps ”时，我发现相当多的基于 KO 的 Google Maps 实现。我能够找到的所有这些都采用了使用自定义绑定处理程序的方法，而我最初打算将其实现为 Knockout 组件。

例子：

• http://www.codeproject.com/Articles/351298/KnockoutJS-and-Google-Maps-binding
• http://www.hoonzis.com/knockoutjs-and-google-maps-binding/
• https://github.com/manuel-guilbault/knockout.google.maps

谁能指出我正确的方向，为什么在这里更喜欢自定义绑定处理程序而不是 KO 组件？

我计划的用例是这样的：

我正在实现一个带有地址搜索结果列表的页面。到目前为止的列表是一个 KO 组件，每个列表条目由另一个 KO 组件生成，该列表组件在 foreach 绑定中重复调用该组件。在这个搜索结果列表旁边，我需要一个谷歌地图，在地图中也显示结果条目。列表、列表条目和地图之间也会有相当多的交互。

这是我到目前为止所得到的：

我敢肯定我在这里遗漏了一些非常明显的东西，但我是第一次尝试 ES6，在五天无处可去之后，我想我应该开放社区。

我有一个视图模型类：

（忽略模板，它只是一个使用导入的段落标签）

然后是一个入口点：

我的页面有一个简单的组件：

当我查看页面时，该元素包含我的组件的模板。页面不显示消息“Hello, world!”，而是显示“Hello, undefined!”。我已经多次调试了这个过程，它总是成功地创建了一个具有正确参数的 TestViewModel 实例。但是绑定到页面的视图模型是由 Knockout 中的 createViewModel 函数生成的。我在将模型实例绑定到组件的设置中缺少什么？

我有以下组件：

我将此组件与下面的视图模型一起使用，其中可观察列表中的项目具有不同的类型并具有不同的属性：

该组件运行良好，每次更改输入框中的文本时都会更新基础数据：

现在，我想将我的 observables 的逻辑封装到组件本身中，所以我以这种方式更改了组件：

...现在我有了可观察的 items.choice，里面只有数据：

为什么在我的第二个示例中没有更新主视图模型中的基础数据，尽管 items.choice 仍然是可观察的？我确定我错过了一些概念，也许我的可观察数组中的每个项目也应该是可观察的，但我不明白是否有办法让第二个例子工作。

第一个例子：http: //jsfiddle.net/5739ht0q/2/ 第二个例子：http: //jsfiddle.net/079tx0nn/

我正在使用淘汰组件和 postal.js 进行组件之间的通信。

我已经注册了两个组件，A 和 B。当页面加载时，我希望 A 向 B 发送消息。我有这个：

...

问题是有时组件 A 在组件 B 加载之前发送消息，因此准备好接收消息。因此消息丢失，组件 B 中的操作未执行。

编辑：

控制组件加载顺序的最佳方法是什么？

我正在学习淘汰赛并尝试以下一个小例子是我拥有的三个文件：索引介绍介绍

我正在使用 netbeans IDE 进行开发。

索引.html

viewModels - Introduction.js

意见-introduction.html

我没有得到想要的结果。所需的输出在下面的链接中是这样的

http://learn.knockoutjs.com/#/?tutorial=collections