[英]knockout js visible data-bind attribute not showing results
I am working with knockout js - I have a view page in which i am displaying the same information in two different layouts. 我正在使用knockout js - 我有一个视图页面,我在两个不同的布局中显示相同的信息。 I am using the knockout-templates and i have my knockout script in a separate file in which i call in the view page.
我正在使用knockout-templates,我将我的淘汰脚本放在一个单独的文件中,我在视图页面中调用它。
Problem 问题
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.
我想要一个切换按钮,它将改变显示项目的布局 - 我不介意有两个按钮一个用于网格,一个用于列表。
View page 查看页面
<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>
}
Knockout js i have in a separate file not within the view Knockout 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()); } };
I would really like any help :) 我真的很想得到任何帮助:)
You could add a visible: attribute based on an ko.observable such as showGrid or showList to hide each other. 您可以根据诸如showGrid或showList之类的ko.observable添加visible:属性以相互隐藏。
If you make a js.fiddle I can give you a better idea of where to put them. 如果你制作一个js.fiddle,我可以让你更好地了解它们的位置。
I think your 'visible' binding should be outside of your template binding like this: 我认为你的'可见'绑定应该在你的模板绑定之外,如下所示:
<div data-bind="template: {name:'grid', foreach: Users}, visible: grid()"></div>
<div data-bind="template: {name:'list', foreach: Users}, visible: !grid()"></div>
I had this problem also. 我也有这个问题。 Use if and ifnot instead of visible.
使用if和ifnot而不是visible。 This solved it for me.
这解决了我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.