knockout.js load widget from javascript library
<p>I'm trying to add a widget into an existing application that uses knockout.  The documentation for this widget is pretty sparse.  The documentation instructs me to place</p>

<pre><code>&lt;script&gt;Widget.insertWidget({"productId":"1234"});&lt;/script&gt;
</code></pre>

<p>into my page where I want the widget to display.</p>

<p>This project is using haml and I've been able to get the example working by doing the following</p>

<pre><code>%div
  :javascript
    Widget.insertWidget({"productId":"1234"})
</code></pre>

<p>This gets the example to work, but I need to have that <code>productId</code>, which is a property on a knockout observable.</p>

<p>So I'm trying to implement the bindings and that's where I'm stuck.  I've tried variations of</p>

<pre><code>%div{ 'data-bind' =&gt; "(text|html|value) =&gt; $parent.widgetInserter" }
</code></pre>

<p>Where <code>widgetInserter</code> is</p>

<pre><code>widgetInserter: =&gt;
  Widget.insertWidget({"productId":@product().id})
</code></pre>

<p>I'm able to hit a <code>debugger</code> statement inside my <code>insertWidget</code> function, but the widget isn't being displayed.</p>

<p>To me it seems like one of those should have worked, but none have.  I appreciate any guidance on this.</p>