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})

我可以在我的 insertWidget 函数中点击 debugger 语句，但是没有显示小部件。

对我来说，其中一个应该有效，但 none 有效。我很感激任何关于这方面的指导。

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})

knockout.js load widget from javascript library