Asp.net Modèles clients -

StackOverflow https://stackoverflow.com/questions/895112

  •  23-08-2019
  •  | 
  •  

Question

Est-il possible de réutiliser un client modèle à l'aide des modèles client asp.net ajax 4.0? J'ai un scénario comme le montre l'exemple ci-dessous. J'ai deux questions ici:

  1. Je ne pouvais pas le cas dans conditionwork client-template
  2. Comment puis-je réutiliser la balise u l modèle pour trois types de données "colonne" (col1, col2, dans col3 exemple JSON)?

exemple de code: 

<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>
Était-ce utile?

La solution

Quelque chose comme cela devrait fonctionner - Je suis juste en tapant ce à la volée alors pardonnez-moi si ce nest pas parfait. 

<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>

Autres conseils

aperçu 4, vous injectez code en utilisant le code suivant: avant et code:. Après attributs au lieu des blocs de code de commentaire

Il est également possible de réutiliser un modèle. En fait, le cadre fera pour vous. Si vous pointez la propriété de modèle de deux vues de données au même élément, un seul modèle sera compilé et utilisé se

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top