tengo este codigo pero no entiendo la funcion data-bind con el geyPrizeavailable ni css': $data.computeInputCSS, que quiere decir?llama un servidor externo el cual usa un programa o algoritmo para verficar el premio a otorgar?
<!-- INSERTA CODIGO FEITO -->
<div class="row" data-bind="visible: (!$data.showModalRed() && $data.notWonBlock() == false)">
<h3 class="col-xs-12">¡Inserta tu código y comprueba si has ganado!</h3>
<div class="col-xs-12" data-bind="with: $data.entries[0][0]">
<input placeholder="CÓDIGO" data-bind="'css': $data.computeInputCSS,
'title': $data.title,
'maxlength': $data.maxlength,
'disable': $data.locked(),
'changeClean': $data.value,
'textInput': $data.value.toUpper" type="text" />
<!-- ERROR FE CODIGO MSG01 FEITO -->
<p class="col-xs-12 error_dv msg error" data-bind="visible: $data.valid() === false">
<!--ATENCIÓN, EL CÓDIGO QUE HAS INTRODUCIDO NO ES EL CORRECTO.<br/>INTÉNTALO DE NUEVO.-->
El código introducido no es correcto
</p>
</div>
<div class="col-xs-12">
<div class="checkbox" data-bind="with: $data.entries[0][1]">
<input type="checkbox" data-bind="'title':$data.title,
'disable': $data.locked(),
'css': $data.computeInputCSS,
clickClean: $data.value,
'checked': $data.value" />
<!-- Se vierem pedir click nos terminos mais tarde -->
<!--<label>Acepto los <span class="bt" id="bt_terminos_lbl">Términos y condiciones</span></label>-->
<label data-bind="'css': $data.computeInputCSS">
<span>Acepto los Términos y Condiciones</span>
</label>
<!-- ERROR FE CHECKBOX MSG02 FEITO -->
<p class="col-xs-12 error_dv msg error" data-bind="visible: $data.valid() === false">Tienes que aceptar los Términos y Condiciones.</p>
</div>
</div>
<!-- <div class="col-xs-12 col-sm-9">
<input type="text" name="" />
<div class="row">
<div class="col-xs-12">
<label><input type="checkbox" name="" />Ha lido e acepto los dados bla bla bla.</label>
</div>
</div>
</div>-->
<div class="col-xs-12">
<button class="redNextBT" data-bind="click: showCodeWarning.bind()">
<span>CANJEAR</span>
</button>
</div>
</div>
<!-- ERROR CODE BE FEITO -->
<div class="row text-center" data-bind="visible: ($data.notWonBlock() === true && !$data.showModalRed())">
<h3 class="col-xs-12 msg" data-bind="visible: $data.beVal() === 4">Atención, el código que has introducido no es el ganador.</h3>
<h3 class="col-xs-12 msg" data-bind="visible: $data.beVal() === 3">Atención, el código que has introducido ya ha sido utilizado.</h3>
<h3 class="col-xs-12 msg" data-bind="visible: $data.beVal() === 2">Atención, el código que has introducido ya ha sido utilizado.</h3>
<h3 class="col-xs-12 msg" data-bind="visible: $data.beVal() === 1">Atención, el código que has introducido no es un código valido.</h3>
<div class="col-xs-12">
<button class="redNextBT" data-bind="'click': $data.intentalo.bind()">Inténtalo de nuevo</button>
<!-- <button class="redNextBT">INTÉNTALO DE NUEVO</button>-->
</div>
</div>
<!-- Block Prize BE FEITO -->
<div class="blockPrize" data-bind="visible: $data.showModalRed">
<!-- Mensagens -->
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 1">Ya has agotado el número total de códigos invalidos</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 2">Ya has agotado el número total de códigos validos</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 3">Ya has agotado el número de códigos invalidos del dia</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 4">Ya has agotado el número de códigos validos del dia</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 5">YA HAS GANADO EL NÚMERO MÁXIMO total de PREMIOs</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 6">YA HAS GANADO EL NÚMERO MÁXIMO DISPONIBLE DE ESTE PREMIO</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 7">Número total de premios de la campaña alcanzado</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 8">Este premio aún no está disponible</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 9">La fecha para descubrir si has ganado ha sido sobrepasada</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 10">Tu cuenta ya ha ganado el número máximo de premios</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 11">Ya se ha atribuido el número máximo de premios al IBAN que has introducido</h3>
</div>
</form>
</div>
<!-- ALERT CODE FEITO -->
<div class="alertCode" id="modalAlertaCodigoUmaVez" data-bind="visible: codeWarning">
<div class="vertical-align parent">
<div class="vertical-align child">
<h1 class="col-xs-12 title">Atención</h1>
<h3 class="col-xs-12 msg" style="margin: 0;">El código que has introducido solo podrá ser canjeado una vez.</h3>
<h3 class="col-xs-12 msg">¿Deseas continuar?</h3>
<div class="wrap">
<div class="col-xs-6">
<button class="whiteBT" data-bind="click: cancelCode.bind()">Cancelar</button>
</div>
<div class="col-xs-6">
<button class="registerBT" data-bind="click: submit.bind()">Aceptar</button>
</div>
</div>
</div>
</div>
</div>
</section>
"""""
El data-bind lo que hace es enviar una dupla de Nombre:Valor, y por lo que entiendo del código que envías, la parte ( css': $data.computeInputCSS) lo que esta haciendo es diciendo es cual css va a usar para la caja de texto del CODIGO.
en otras palabras en este código no solamente se llaman a funciones como getPrizeAvailable() , sino que se altera el CSS de los objetos a través del data-bind.
El data-bind, evalua cuantos premios disponibles hay y también valida en Código que introduces para saber si ganase o no.
haz de cuenta que el data-bind es como un ajax donde tu le dice que hacer de acuerdo a la dupla que le pasas (nombre:valor) pero este valor puede ser una función.
""""<!-- PARTICIPAR -->
<article id="part" class="container-fluid participar" data-bind="with: pdf.prizeBlock">
<!-- Nº premios por entregar -->
<div class="row ganadores" data-bind="visible: getPrizeAvailable() > 0">
<h1>¡QUEDAN <span data-bind="text: getPrizeAvailable()">0</span> PREMIOS POR ENTREGAR!</h1>
</div>
<!-- FORM PARTICIPAR -->
<section class="row wrap" data-bind="with: valCode, visibleSub: 'partdef'">
<div class="container">
<h1 class="col-xs-12" data-bind="visible: showModalRed() !== 9">Descúbrelo</h1>
<form id="inserta_tu_codigo">
<!-- INSERTA CODIGO FEITO -->
<div class="row" data-bind="visible: (!$data.showModalRed() && $data.notWonBlock() == false)">
<h3 class="col-xs-12">¡Inserta tu código y comprueba si has ganado!</h3>
<div class="col-xs-12" data-bind="with: $data.entries[0][0]">
<input placeholder="CÓDIGO" data-bind="'css': $data.computeInputCSS,
'title': $data.title,
'maxlength': $data.maxlength,
'disable': $data.locked(),
'changeClean': $data.value,
'textInput': $data.value.toUpper" type="text" />
<!-- ERROR FE CODIGO MSG01 FEITO -->
<p class="col-xs-12 error_dv msg error" data-bind="visible: $data.valid() === false">
<!--ATENCIÓN, EL CÓDIGO QUE HAS INTRODUCIDO NO ES EL CORRECTO.<br/>INTÉNTALO DE NUEVO.-->
El código introducido no es correcto
</p>
</div>
<div class="col-xs-12">
<div class="checkbox" data-bind="with: $data.entries[0][1]">
<input type="checkbox" data-bind="'title':$data.title,
'disable': $data.locked(),
'css': $data.computeInputCSS,
clickClean: $data.value,
'checked': $data.value" />
<!-- Se vierem pedir click nos terminos mais tarde -->
<!--<label>Acepto los <span class="bt" id="bt_terminos_lbl">Términos y condiciones</span></label>-->
<label data-bind="'css': $data.computeInputCSS">
<span>Acepto los Términos y Condiciones</span>
</label>
<!-- ERROR FE CHECKBOX MSG02 FEITO -->
<p class="col-xs-12 error_dv msg error" data-bind="visible: $data.valid() === false">Tienes que aceptar los Términos y Condiciones.</p>
</div>
</div>
<!-- <div class="col-xs-12 col-sm-9">
<input type="text" name="" />
<div class="row">
<div class="col-xs-12">
<label><input type="checkbox" name="" />Ha lido e acepto los dados bla bla bla.</label>
</div>
</div>
</div>-->
<div class="col-xs-12">
<button class="redNextBT" data-bind="click: showCodeWarning.bind()">
<span>CANJEAR</span>
</button>
</div>
</div>
<!-- ERROR CODE BE FEITO -->
<div class="row text-center" data-bind="visible: ($data.notWonBlock() === true && !$data.showModalRed())">
<h3 class="col-xs-12 msg" data-bind="visible: $data.beVal() === 4">Atención, el código que has introducido no es el ganador.</h3>
<h3 class="col-xs-12 msg" data-bind="visible: $data.beVal() === 3">Atención, el código que has introducido ya ha sido utilizado.</h3>
<h3 class="col-xs-12 msg" data-bind="visible: $data.beVal() === 2">Atención, el código que has introducido ya ha sido utilizado.</h3>
<h3 class="col-xs-12 msg" data-bind="visible: $data.beVal() === 1">Atención, el código que has introducido no es un código valido.</h3>
<div class="col-xs-12">
<button class="redNextBT" data-bind="'click': $data.intentalo.bind()">Inténtalo de nuevo</button>
<!-- <button class="redNextBT">INTÉNTALO DE NUEVO</button>-->
</div>
</div>
<!-- Block Prize BE FEITO -->
<div class="blockPrize" data-bind="visible: $data.showModalRed">
<!-- Mensagens -->
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 1">Ya has agotado el número total de códigos invalidos</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 2">Ya has agotado el número total de códigos validos</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 3">Ya has agotado el número de códigos invalidos del dia</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 4">Ya has agotado el número de códigos validos del dia</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 5">YA HAS GANADO EL NÚMERO MÁXIMO total de PREMIOs</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 6">YA HAS GANADO EL NÚMERO MÁXIMO DISPONIBLE DE ESTE PREMIO</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 7">Número total de premios de la campaña alcanzado</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 8">Este premio aún no está disponible</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 9">La fecha para descubrir si has ganado ha sido sobrepasada</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 10">Tu cuenta ya ha ganado el número máximo de premios</h3>
<h3 class="col-xs-12 msg" data-bind="visible: showModalRed() === 11">Ya se ha atribuido el número máximo de premios al IBAN que has introducido</h3>
</div>
</form>
</div>
<!-- ALERT CODE FEITO -->
<div class="alertCode" id="modalAlertaCodigoUmaVez" data-bind="visible: codeWarning">
<div class="vertical-align parent">
<div class="vertical-align child">
<h1 class="col-xs-12 title">Atención</h1>
<h3 class="col-xs-12 msg" style="margin: 0;">El código que has introducido solo podrá ser canjeado una vez.</h3>
<h3 class="col-xs-12 msg">¿Deseas continuar?</h3>
<div class="wrap">
<div class="col-xs-6">
<button class="whiteBT" data-bind="click: cancelCode.bind()">Cancelar</button>
</div>
<div class="col-xs-6">
<button class="registerBT" data-bind="click: submit.bind()">Aceptar</button>
</div>
</div>
</div>
</div>
</div>
</section>
"""""
21/02/2017 19:14
El data-bind lo que hace es enviar una dupla de Nombre:Valor, y por lo que entiendo del código que envías, la parte ( css': $data.computeInputCSS) lo que esta haciendo es diciendo es cual css va a usar para la caja de texto del CODIGO.
en otras palabras en este código no solamente se llaman a funciones como getPrizeAvailable() , sino que se altera el CSS de los objetos a través del data-bind.
21/02/2017 22:43
22/02/2017 02:11
haz de cuenta que el data-bind es como un ajax donde tu le dice que hacer de acuerdo a la dupla que le pasas (nombre:valor) pero este valor puede ser una función.
21/02/2017 23:52
22/02/2017 02:07
22/02/2017 23:37