- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 knockout js - 我有一个 View 页面,我在其中以两种不同的布局显示相同的信息。我正在使用 knockout-templates 并且我在一个单独的文件中有我的 knockout 脚本,我在 View 页面中调用该文件。
问题
目前,我要么同时显示两种不同的布局( GridView 和 ListView ),要么根据我如何配置数据绑定(bind)而没有得到任何布局。我想要一个切换按钮来改变显示项目的布局——我不介意有两个按钮,一个用于网格,一个用于列表。
查看页面
<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 我在一个单独的文件中,不在 View 中
$.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());
}
};
我真的很想得到任何帮助:)
最佳答案
我认为你的“可见”绑定(bind)应该像这样在你的模板绑定(bind)之外:
<div data-bind="template: {name:'grid', foreach: Users}, visible: grid()"></div>
<div data-bind="template: {name:'list', foreach: Users}, visible: !grid()"></div>
Here是 fiddle 。
关于javascript - knockout js 可见数据绑定(bind)属性不显示结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15929611/
你能比较一下属性吗 我想禁用文本框“txtName”。有两种方式 使用javascript,txtName.disabled = true 使用 ASP.NET, 哪种方法更好,为什么? 最佳答案 我
Count 属性 返回一个集合或 Dictionary 对象包含的项目数。只读。 object.Count object 可以是“应用于”列表中列出的任何集合或对
CompareMode 属性 设置并返回在 Dictionary 对象中比较字符串关键字的比较模式。 object.CompareMode[ = compare] 参数
Column 属性 只读属性,返回 TextStream 文件中当前字符位置的列号。 object.Column object 通常是 TextStream 对象的名称。
AvailableSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。 object.AvailableSpace object 应为 Drive 
Attributes 属性 设置或返回文件或文件夹的属性。可读写或只读(与属性有关)。 object.Attributes [= newattributes] 参数 object
AtEndOfStream 属性 如果文件指针位于 TextStream 文件末,则返回 True;否则如果不为只读则返回 False。 object.A
AtEndOfLine 属性 TextStream 文件中,如果文件指针指向行末标记,就返回 True;否则如果不是只读则返回 False。 object.AtEn
RootFolder 属性 返回一个 Folder 对象,表示指定驱动器的根文件夹。只读。 object.RootFolder object 应为 Dr
Path 属性 返回指定文件、文件夹或驱动器的路径。 object.Path object 应为 File、Folder 或 Drive 对象的名称。 说明 对于驱动器,路径不包含根目录。
ParentFolder 属性 返回指定文件或文件夹的父文件夹。只读。 object.ParentFolder object 应为 File 或 Folder 对象的名称。 说明 以下代码
Name 属性 设置或返回指定的文件或文件夹的名称。可读写。 object.Name [= newname] 参数 object 必选项。应为 File 或&
Line 属性 只读属性,返回 TextStream 文件中的当前行号。 object.Line object 通常是 TextStream 对象的名称。 说明 文件刚
Key 属性 在 Dictionary 对象中设置 key。 object.Key(key) = newkey 参数 object 必选项。通常是 Dictionary 
Item 属性 设置或返回 Dictionary 对象中指定的 key 对应的 item,或返回集合中基于指定的 key 的&
IsRootFolder 属性 如果指定的文件夹是根文件夹,返回 True;否则返回 False。 object.IsRootFolder object 应为&n
IsReady 属性 如果指定的驱动器就绪,返回 True;否则返回 False。 object.IsReady object 应为 Drive&nbs
FreeSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。只读。 object.FreeSpace object 应为 Drive 对象的名称。
FileSystem 属性 返回指定的驱动器使用的文件系统的类型。 object.FileSystem object 应为 Drive 对象的名称。 说明 可
Files 属性 返回由指定文件夹中所有 File 对象(包括隐藏文件和系统文件)组成的 Files 集合。 object.Files object&n
我是一名优秀的程序员,十分优秀!