knockout.js从javascript库加载小部件

Question

我试图将小部件添加到使用knockout的现有应用程序中。此小部件的文档非常稀疏。文档指示我放置

<script>Widget.insertWidget({"productId":"1234"});</script>

进入我想要显示小部件的页面。

这个项目正在使用haml，我已经能够通过以下方式使示例工作

%div
  :javascript
    Widget.insertWidget({"productId":"1234"})

这使得示例工作，但我需要有productId，这是一个可以观察的淘汰赛的属性。

所以我试图实施绑定以及我遇到的问题。我尝试了

的各种变体

%div{ 'data-bind' => "(text|html|value) => $parent.widgetInserter" }

widgetInserter

的位置

widgetInserter: =>
  Widget.insertWidget({"productId":@product().id})

我能够在debugger函数中点击insertWidget语句，但小部件未显示。

对我来说，似乎其中一个应该有效，但没有人有。我很感激任何指导。

Answer 1

如果您无法从其他<script>访问相同的Knockout视图模型，请将产品ID绑定到隐藏的输入：

<input type="hidden" data-bind="value: productId" id="pid" />

然后再访问它：

%div
  :javascript
    var productId = document.querySelector('#pid').value;
    Widget.insertWidget({"productId": productId})