Asp.net Modelos Client -
-
23-08-2019 - |
Pergunta
É possível voltar a usar um cliente de modelo usando asp.net ajax 4,0 templates cliente? Eu tenho um cenário como mostrado no exemplo abaixo. Eu tenho duas perguntas aqui:
- Eu não poderia começar a se conditionwork em cliente-template
- Como posso reutilizar o u l tag modelo para três tipos de dados de "colunas" (COL1, Col2, em col3 exemplo JSON)?
código de exemplo:
<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>
Solução
Algo como isso deve funcionar - Eu só estou escrevendo isso em tempo real assim que me perdoar se ele não é perfeito.
<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>
Outras dicas
Na pré-visualização 4, você injetar código usando o código: antes e código:. Após atributos em vez dos blocos de código comentário
Também é possível voltar a usar um modelo. Na verdade, o quadro vai fazer isso para você:. Se apontar a propriedade de modelo de dois pontos de vista de dados ao mesmo elemento, apenas um modelo vai ser compilado e utilizado
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow