創建一個切換按鈕來改變頁面瀏覽

Question

我使用基因敲除js來獲取我的數據來顯示，我也用它來綁定模板。我有一個頁面以兩種不同的方式顯示相同的信息：一個是網格視圖，另一個是列表視圖。目前我在頁面加載中顯示兩個視圖。我想爲網格創建兩個按鈕，一個用於列表。我不知道如何去與Knockout js的任何提示或幫助表示讚賞。

查看頁面

<div data-bind="template: {name:'grid-template'}, visible: !showList()"></div> 
<div data-bind="template: {name:'list-template'}, visible: showList()"></div> 

<input type="button" value="Toggle" data-bind="click: toggleView"/> 

<script style="float:left" type="text/html" id ="grid-template"> 
    <section " style="width:100%; float:left"> 
    <section id="users" data-bind="foreach: Users"> 
     <div id="nameImage"> 
      <figure id="content"> 
       <img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/> 
       <figcaption> 
        <a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a> 
        <a title="Profile" id="profileIcon" class="icon-user icon-white"></a> 
       </figcaption> 
      </figure> 
      <p data-bind="text:Name"></p> 
      </div> 
     </section> 
    </section> 
</script> 

<script style="float:left" type="text/html" id="list-template"> 
     <div data-bind="foreach: Users"> 
      <div style="width:60%; float:left; margin:10px; height:58px"> 
       <img style="float:left; margin-right:5px" width="58" height="58" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/> 
       <p style="height:58px; float:left; vertical-align:central" data-bind="text:Name"></p> 
       <a style="float:right" title="Profile" class="icon-user icon-black"></a> 
       <a style="float:right" title="Email" class="icon-envelope icon-black" data-bind="attr:{'href':'mailto:' + Email()}"></a> 
      </div> 
     </div> 
</script> 

@section scripts{ 
    @Scripts.Render("~/bundles/user" + ViewBag.Layout.AppVersionForUrls) 

    <script type="text/javascript"> 
     (function ($) { 
      $.views.User.GetUser('@url'); 
     })(jQuery); 
    </script> 
    } 

淘汰賽JS

$.views.User.UserViewModel = function (data) { 
     var self = this; 
     self.Name = ko.observable(data.Name); 
     self.Email = ko.observable(data.Email); 
     self.ContentRole = ko.observable(data.ContentRole); 
     self.MD5Email = ko.observable(data.MD5Email); 
     self.GravatarUrl = ko.computed(function() { 
      return 'http://www.gravatar.com/avatar/' + self.MD5Email() + '?s=300&d=identicon&r=G'; 
     }); 
     self.showList = ko.observable(true); 
     self.toggleView = function() { 
     self.showList(!self.showList()); 
     } 
    }; 

Answer 1

如果我理解正確的話，可以在每次div的Visible屬性綁定到你每一次翻轉按鈕的布爾被按下。

HTML：

<input type="button" value="Toggle" data-bind="click: toggleView"/> 

<div data-bind="visible: showGrid()">Grid</div> 
<div data-bind="visible: !showGrid()">List</div> 

視圖模型：

var ViewModel = function() { 
    var self = this; 

    self.showGrid = ko.observable(true); 
    self.toggleView = function() { 
     self.showGrid(!self.showGrid()); 
    } 
} 

var vm = new ViewModel(); 
ko.applyBindings(vm); 

這裏有一個jsFiddle。