Set href using $root value within foreach loop
<p>The link in the first <code>td</code> column spazzes out when trying to bind to <code>$root.rootBaseUrl</code>.</p>

<p>In the second <code>td</code> column, the same <code>rootBaseUrl</code> observable prints perfectly.</p>

<p>The difference is that in the first <code>td</code> column, I am trying to set the value within <code>attr:</code>.</p>

<p>Also, please note that there is a <code>foreach</code> loop happening at the <code>tbody</code> level. Hence the use of <code>$root</code> prefix. </p>

<pre class="lang-html prettyprint-override"><code>    &lt;tbody data-bind="foreach: siteList"&gt;        
        &lt;tr&gt;
            &lt;td&gt;&lt;h3&gt;&lt;a data-bind="text: SiteName, attr: {href: $root.rootBaseUrl + SiteID}"&gt;&lt;/a&gt;&lt;/h3&gt;&lt;/td&gt;                
            &lt;td&gt;&lt;h3&gt;&lt;span data-bind="text: $root.rootBaseUrl"&gt;&lt;/span&gt;&lt;/h3&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>var rootBaseUrl = ko.observable("");
var index = window.location.toString().indexOf("RiskOrder");
var baseURL = window.location.toString().substring(0, index);               
this.rootBaseUrl(baseURL);
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
</code></pre>

<p>Basically, I am getting the current browser URL in the JS, stripping it to the base root url, then trying to add this static URL to the <code>href</code> binding and concatenating with a dynamic <code>SiteID</code> value. </p>

<p>Is this possible? </p>