title: knockout js visible data-bind attribute not showing results
body: <p>I am working with knockout js - I have a view page in which i am displaying the same information in two different layouts. I am using the knockout-templates and i have my knockout script in a separate file in which i call in the view page. </p>
  
  <p><strong>Problem</strong><br>
  Currently i either have the two different layouts being displayed at the same time (grid view and list view) or i get none depending on how i have my data-bind configured. I want to have a toggle button that will change the layout of the displayed item - i wouldn't mind having two buttons one for grid and one for list. </p>
  
  <p><strong>View page</strong></p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button type="button" class="btn" data-bind="click: toggleView" &gt;Toggle&lt;/button&gt;
  &lt;/div&gt;
  
  
  &lt;div data-bind="template: {name:'grid', foreach: Users, visible: grid()}"&gt;&lt;/div&gt;
  &lt;div data-bind="template: {name:'list', foreach: Users, visible: !grid()}"&gt;&lt;/div&gt;
  
  &lt;script style="float:left" type="text/html" id ="grid"&gt;
      &lt;section id="Images" style=" float:left"&gt;
      &lt;section id="users"&gt;
          &lt;div id="nameImage"&gt;
              &lt;figure id="content"&gt;
                  &lt;img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/&gt;
                  &lt;figcaption&gt;
                      &lt;a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"&gt;&lt;/a&gt;
                      &lt;a title="Profile" id="profileIcon" class="icon-user icon-white"&gt;&lt;/a&gt;
                  &lt;/figcaption&gt;
              &lt;/figure&gt;
              &lt;p data-bind="text:Name"&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/section&gt;
  &lt;/script&gt;
  
  
  &lt;script style="float:left" type="text/html" id="list"&gt;
          &lt;div&gt;
              &lt;div class="border_bottom light buffer" style="width:60%; float:left; margin:10px; height:58px"&gt;
                  &lt;img style="margin-right:5px; vertical-align:middle" width="58" height="58" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/&gt;
                  &lt;span style="height:58px; vertical-align:middle" data-bind="text:Name"&gt;&lt;/span&gt;
                  &lt;a style=" margin: 5px; vertical-align:middle"  title="Email" class="icon-envelope icon-black" data-bind="attr:{'href':'mailto:' + Email()}"&gt;&lt;/a&gt;
                  &lt;a style=" margin: 5px; vertical-align:middle"  title="Profile"  class="icon-user icon-black"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/script&gt;
  
  @section scripts{
      @Scripts.Render("~/bundles/user" + ViewBag.Layout.AppVersionForUrls)
  
      &lt;script type="text/javascript"&gt;
          (function ($) {
              $.views.User.GetUser('@url');
          })(jQuery);
      &lt;/script&gt;
      }
  </code></pre>
  
  <p><strong>Knockout js i have in a separate file not within the view</strong></p>
  
  <blockquote>
  <pre><code>$.views.User.UserViewModel = function (data) {
          var self = this;
          self.Name = ko.observable(data.Name);
          self.Email = ko.observable(data.Email);
          self.MD5Email = ko.observable(data.MD5Email);
          self.GravatarUrl = ko.computed(function () {
             return 'http://www.gravatar.com/avatar/' + self.MD5Email() + '?s=300&amp;d=identicon&amp;r=G';
          });
          self.grid = ko.observable(true);
          self.toggleView = function () {
              self.grid(!self.grid());
          }
      };
  </code></pre>
  </blockquote>
  
  <p>I would really like any help :)</p>