title: Knockout.js Binding param to Data-Target returning object instead of text (Accordion)
body: <p>New to Knockout.Js and just about getting my head around the data-bindings after three days...</p>
  <p>I have created a dynamic accordion and when doing my data-bind with the attr: {'data-target': '#' + RecipeName' i get back Data-target=#[object object] I understand that i can get back the name
  of the parameter if i used data-bind=&quot;text: RecipeName&quot; (But i need to append the # to it
  to allow my accordion to be opened on the correct Id..)</p>
  <p>I have looked online and i can't seem to find a sufficient answer. I have tried google
  dev tools to change the #[object object] to the value im expecting and it works fine.</p>
  <p>Please can someone explain why this happens and what is needed to resolve.. I guess its pretty straight forward?</p>
  <pre><code>&lt;section id=&quot;results&quot; style=&quot;margin-top: 1em;&quot;&gt;
      &lt;div class=&quot;accordion-group&quot;&gt;
          &lt;div class=&quot;accordion-heading&quot;&gt;
          &lt;table class=&quot;table table-striped table-hover accordion&quot;&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Set Next&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Bench&lt;/th&gt;
                      &lt;th&gt;Transacted&lt;/th&gt;
                      &lt;th&gt;Receipe Name&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody data-bind=&quot;foreach: Stages&quot;&gt;
  
                  *****&lt;tr class=&quot;accordion-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#&quot; data-bind=&quot;attr: {'data-target': '#' + RecipeName}&quot;&gt;*****
                      &lt;td data-bind=&quot;css: CellClass&quot;&gt;
                          &lt;button class=&quot;btn btn-warning&quot; data-bind=&quot;attr: {'data-id': Id}&quot; data-toggle=&quot;modal&quot; data-target=&quot;#moveReason&quot;&gt;@Html.LocalisedStringFor(model =&gt; model.MoveToStageText)&lt;/button&gt;
                          &lt;a class=&quot;text&quot; data-bind=&quot;attr: {'data-id': Id}&quot; data-toggle=&quot;modal&quot; data-target=&quot;#moveReason&quot;&gt;&lt;span&gt;@Html.LocalisedStringFor(model =&gt; model.CurrentPositionText)&lt;/span&gt;&lt;/a&gt;
                      &lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind=&quot;text: ProcessName&quot;&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind=&quot;text: BenchName&quot;&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind=&quot;text: TransactionStatus&quot;&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind=&quot;text: RecipeName&quot;&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr id=&quot;&quot; class=&quot;accordion-body collapse&quot; data-bind=&quot;attr: {'id':RecipeName}&quot;&gt;
                      &lt;td colspan=&quot;5&quot;&gt;
                          &lt;div class=&quot;accordion-inner&quot; data-bind=&quot;foreach: $parent.Stages&quot;&gt;
                              &lt;ul&gt;
                                  &lt;li&gt; &lt;span data-bind=&quot;text: StepName&quot;&gt;&lt;/span&gt;&lt;/li&gt;
                                  &lt;button class=&quot;btn btn-warning&quot; data-bind=&quot;attr: {'data-id': Id}&quot; data-toggle=&quot;modal&quot; data-target=&quot;#moveReason&quot;&gt;@Html.LocalisedStringFor(model =&gt; model.MoveToStageText)&lt;/button&gt;
                              &lt;/ul&gt;
  
                          &lt;/div&gt;
  
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
  
          &lt;/table&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>This is the result it returns</p>
  <p><a href="https://i.stack.imgur.com/kIy3M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kIy3M.png" alt="Visual of what it returning" /></a></p>