两个页面布局到一个视图

本文关键字：视图 一个 两个 布局 | 更新日期: 2023-09-27 18:08:04

我想听听关于这件事的建议。我有一个视图页面，将显示一些用户。一种视图是在网格(类似于图库)中显示用户的图像。第二个视图是在列表布局中按用户名显示相同的用户。我将有一个切换按钮在页面上切换两者之间。最好的方法是什么?拥有两个独立的视图页面还是拥有某种类型的部分视图?

根据以下建议更新代码 

<div data-bind="template: {name:'grid-template'}"></div>
<div data-bind="template: {name:'list-template'}"></div>
<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>

Knockout Script File

$.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.renderMode = ko.observable('grid');
        self.displayTemplate = ko.computed(function () {
            return self.renderMode() + '-layout-template';
        });
    };

两个页面布局到一个视图

就我个人而言，我喜欢有干净隔离的小的局部视图，特别是如果它将是常规的HTTP POST。
然而，基于我在下面所做的假设，我认为我可以提出一个更好的实现设计。

我的假设你有

  1. Index.cshtml 父视图显示用户列表。
  2. 包含用户列表的JSON对象数组
  3. 根据我看到的，你正在使用KnockoutJS。
    阅读KnockoutJS模板绑定，特别是"注意5:动态选择使用哪个模板"部分。

如果你使用KnockoutJS或类似的东西，它会更容易做你正在做的事情。
您只需在两个呈现模板之间进行切换。

<script type="text/html" id="gallery-layout-template"> ... </script>
<script type="text/html" id="listing-layout-template"> ... </script>
<div id="divOutputContainer"
     data-bind="template: { name: displayTemplate, foreach: users }"></div>
<script type="text/javascript">
$(document).ready(function() {
    // I am just writing out a dummy User array here.
    // Render out your User Array JSON encoded using JSON.NET.
    var myUsers = [
        { "id" : 1, "name": "User 1" },
        { "id" : 2, "name": "User 2" }
    ];
    // here is your KnockoutJS View Model "class"
    function MyKoViewModel(users) {
        var self = this;
        self.users = ko.observableArray(users);
        // Toggle this renderMode observable's value
        // between 'listing' and 'gallery' via your Toggle button click event handler
        self.renderMode = ko.observable( 'gallery' );
        self.displayTemplate = function(user) {
            // this will return 'gallery-layout-template' or 'listing-layout-template'
            return self.renderMode() + '-layout-template';
        }
    }
    ko.applyBindings( new MyKoViewModel( myUsers ) );
});
</script>
因此，使用这种技术，就不需要每次都调用AJAX来使用不同的呈现模板刷新视图。你已经有了所有想要显示为客户端JavaScript KnockoutJS视图模型的数据。
然后，只需使用KnockoutJS切换客户端呈现模板。

必须更有效率:-)

注意

我有一种感觉，你可能不得不像这样使用ko.computed()来计算MyKoViewModel的displayTemplate()函数。

self.displayTemplate = ko.computed(function() {
    return self.renderMode() + '-layout-template';
}
相关文章：