Tiempo lectura: 1 min. 15 s.
Expandos Loop # Ejemplo Siviglia-js
Expandos Loop, ejemplo de uso con Siviglia-js
El siguiente código veremos los Loop Expandos:
- Loop con Expandos.
Los expandos sirven para expandir un contexto y aplicarlo a una entidad <html>
.
<html>
<head>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="../../../Siviglia.js"></script>
<script src="../../../SivigliaStore.js"></script>
<script src="../../../Model.js"></script>
<script src="../../../SivigliaTypes.js"></script>
<script>
var contextStack = new Siviglia.Path.ContextStack();
var obj = {
paises: {"espana": ["Madrid","Sevilla","Barcelona"],
"francia": ["Paris","asdas","asdasdas"]
}
};
var obj2 = {
h:"espana"
};
function callMe(node,params){
console.dir(node);
console.dir(params);
}
Siviglia.Utils.buildClass({
"context": "Test",
"classes":{
"Test1":{
"inherits": "Siviglia.UI.Expando.View",
methods:{
preInitialize:function(params){
this.pepito2=params.uno;
this.pepito="HOLA";
},
initialize:function(params){},
initNode:function(node,params){
var name_widget = "Test.Test2";
if (params.curPais =="francia"){
name_widget = "Test.Test3";
}
var widget= new Test.Test2( // contiene 5 parámetros
name_widget, // 1. nombre del widget
{country: params.curPais}, // 2. parametros
{}, // 3. unsued
$('<div></div>'), // 4. nodo
this.__context // 5. contexto
);
widget.__build(); // Construcción del widget
node.append(widget.rootNode); // append de ese nodo al rootnode
}
}
},
"Test2":{
"inherits": "Siviglia.UI.Expando.View",
methods:{
preInitialize:function(params){
this.country=params.country;
},
initialize:function(params){},
}
}
}
})
</script>
</head>
<body>
<div style="display:none">
<div data-sivWidget="Test.Test1" data-widgetCode="Test.Test1">
<div data-sivValue="[%*pepito%]"></div> <!-- referencia -->
<div data-sivValue="[%*pepito2%]"></div> <!-- referencia -->
<div data-sivLoop="#paises" data-contextIndex="current">
<a data-sivValue="Una ciudad de [%@current-index%] es [%#paises/{%@current-index%}/2%]::class|[%#clname%]::href|http://www.pepito.com/user?usreId=[%#myId%]"></a>
<div data-sivEvent="click" data-sivCallback="callMe" data-sivParams='{"current":"@current-index"}'>click</div>
<div data-sivCall="initNode" data-sivParams='{"curPais": "@current-index"}'></div>
</div>
</div>
<div data-sivWidget="Test.Test2" data-widgetCode="Test.Test2">
<div style="background-color: yellow" data-sivValue="/*country"></div>
</div>
<div data-sivWidget="Test.Test3" data-widgetCode="Test.Test2">
<div style="background-color: blue" data-sivValue="/*country"></div>
</div>
</div>
<div data-sivView="Test.Test1" data-sivParams='{"uno":1}'></div>
<div data-sivView="Test.Test1" data-sivParams='{"uno":2}'></div>
<div data-sivView="Test.Test1" data-sivParams='{"uno":3}'></div>
<div data-sivView="Test.Test1" data-sivParams='{"uno":4}'></div>
<script>
var parser=new Siviglia.UI.HTMLParser();
parser.addContext("#",obj);
parser.addContext("!",obj2);
parser.parse($(document.body));
</script>
</body>
</html>
HTML
En resumen, lo más importante de este ejemplo es quedarnos con la idea de que se pueden hacer loop usando expandos:
- data-sivLoop
- data-contextIndex
- data-sivCall
- data-sivParams
Última modificación: March 11, 2020