Asp.net 客户端模板 -答案

【问题标题】：Asp.net Client Templates -Asp.net 客户端模板 -
【发布时间】：2009-05-21 20:56:59
【问题描述】：

是否可以使用 asp.net ajax 4.0 客户端模板重复使用客户端模板？我有一个场景，如下例所示。我有两个问题：

我无法在客户端模板中获取 if 条件
如何重复使用 ul 标签三种类型的模板 “列”数据（col1、col2、col3 在例如 json)?

示例代码：

<style>
    .sys-template { display:none; }
    .list {width:220px; float:left;  margin:0px 0px 0px 10px; background-color:#f2f2f2; }
    </style>

    <script src="MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>

    <script type="text/javascript">
        var listItems = [{ item: "item1", col: "col1" },
                         { item: "item2", col: "col1" },
                         { item: "item3", col: "col1" },
                         { item: "item4", col: "col2" },
                         { item: "item5", col: "col2" },
                         { item: "item6", col: "col2" },
                         { item: "item7", col: "col2" },
                         { item: "item8", col: "col3" },
                         { item: "item9", col: "col3" },
                         { item: "item10", col: "col3" }]
    </script>
    </head>

    <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*">
    <ul id="col1" class="list sys-template"  sys:attach="dataview" dataview:data="{{ listItems }}">
        <!--* if (col=="col1") { *-->
        <li>{{item}}</li>
        <!--* } *-->
    </ul>
    <ul id="col2" class="list sys-template"  sys:attach="dataview" dataview:data="{{ listItems }}">
        <!--* if (col=="col2") { *-->
        <li>{{item}}</li>
        <!--* } *-->
    </ul>
    <ul id="col3" class="list sys-template"  sys:attach="dataview" dataview:data="{{ listItems }}">
        <!--* if (col=="col3") { *-->
        <li>{{item}}</li>
        <!--* } *-->
    </ul>
    </body>

【问题讨论】：

标签： asp.net-ajax client-templates

【解决方案1】：

这样的东西应该可以工作 - 我只是在运行中输入这个，如果它不完美，请原谅我。

<ul id="template1" class="sys-template">
  <li code:if="col==$element.id">{{item}}</li>
</ul>

<ul id="col1" class="list sys-template" sys:attach="dataview" dataview:data="{{listItems }}" dataview:itemtemplate="template1">
</ul>
<ul id="col2" class="list sys-template" sys:attach="dataview" dataview:data="{{listItems }}" dataview:itemtemplate="template1">
</ul>
<ul id="col2" class="list sys-template" sys:attach="dataview" dataview:data="{{listItems }}" dataview:itemtemplate="template1">
</ul>

【讨论】：

InfinitiestLoop，这是我需要的，一个例子 :) 非常感谢。在您的示例中唯一需要更改的是，模板的实际实现不应具有“sys-template”类，它实际上隐藏了输出。所以我把它改成：
工作得像魅力
dataview:itemtemplate= 应该是 dataview:itemTemplate=

【解决方案2】：

在预览版 4 中，您使用 code:before 和 code:after 属性而不是注释代码块来注入代码。

也可以重复使用模板。实际上，框架会为您做到这一点：如果您将两个数据视图的模板属性指向同一个元素，则只会编译和使用一个模板。

【讨论】：

感谢伯特兰的快速回复。