创建一个切换按钮来更改页面视图

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 的可见属性绑定到每次按下按钮时翻转的布尔值。

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。