淘汰赛js可见数据绑定属性不显示结果

我正在与淘汰赛js - 我有一个查看页面，其中我在两个不同的布局显示相同的信息。我正在使用淘汰赛模板，并在一个单独的文件中将我的淘汰赛脚本放在视图页面中。淘汰赛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()); 
     } 
    };

我真的想任何帮助:)

来源

2013-04-10 Masriyah

我想你“可见的”结合应该是你的模板这样的结合之外：

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

Here的小提琴。

来源

2013-04-11 02:56:06 WolfgangCodes

您可以添加基于ko.observable（如showGrid或showList）的visible：属性以相互隐藏。

如果你制作一个js.fiddle，我可以给你一个更好的想法，把它们放在哪里。

来源

2013-04-10 15:42:49

我也有这个问题。使用if和ifnot而不是可见。这为我解决了它。

来源

2013-11-06 11:19:44 user2960178

淘汰赛js可见数据绑定属性不显示结果

回答

相关问题