1

我正在使用淘汰赛 js - 我有一个视图页面，我在其中以两种不同的布局显示相同的信息。我正在使用敲除模板，并且我将敲除脚本放在一个单独的文件中，我在视图页面中调用该文件。

问题
目前，我要么同时显示两种不同的布局（网格视图和列表视图），要么我没有得到任何布局，具体取决于我如何配置数据绑定。我想要一个切换按钮来改变显示项目的布局——我不介意有两个按钮，一个用于网格，一个用于列表。

查看页面

<div class="btn-group">
    <button type="button" class="btn" data-bind="click: toggleView" >Toggle</button>
</div>


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

<script style="float:left" type="text/html" id ="grid">
    <section id="Images" style=" float:left">
    <section id="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">
        <div>
            <div class="border_bottom light buffer" style="width:60%; float:left; margin:10px; height:58px">
                <img style="margin-right:5px; vertical-align:middle" width="58" height="58" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/>
                <span style="height:58px; vertical-align:middle" data-bind="text:Name"></span>
                <a style=" margin: 5px; vertical-align:middle"  title="Email" class="icon-envelope icon-black" data-bind="attr:{'href':'mailto:' + Email()}"></a>
                <a style=" margin: 5px; vertical-align:middle"  title="Profile"  class="icon-user icon-black"></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.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.grid = ko.observable(true);
        self.toggleView = function () {
            self.grid(!self.grid());
        }
    };

我真的很想得到任何帮助:)

4

3 回答 3

1

我也有这个问题。使用 if 和 ifnot 代替可见。这为我解决了。

于 2013-11-06T11:19:44.233 回答
1

我认为您的“可见”绑定应该在您的模板绑定之外，如下所示：

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

这是一个小提琴。

于 2013-04-11T02:56:06.193 回答
1

您可以添加基于 ko.observable 的 visible: 属性，例如 showGrid 或 showList 以相互隐藏。

如果您制作 js.fiddle，我可以让您更好地了解将它们放在哪里。

于 2013-04-10T15:42:49.807 回答