JSFiddle - React, Tailwind, and code Playground

by air_hadoken

HTML

<script src="http://canjs.com/release/latest/can.jquery.js"></script>
<script src="http://canjs.com/release/latest/can.map.validations.js"></script>
<script type="text/mustache" id="selecteazaDosare">
  <form enctype="multipart/form-data" novalidate="novalidate" method="post" class="form-horizontal" action="/conta/Plati/ExecutaSelectieDosare">
               <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h3>Selectati dosare de platit</h3>
            </div>             
            <div class="model-body overflow">
                <section>
                    {{#if Errors.length}}
                       <div class="alert alert-block alert-error">
                            {{#each Errors}}
                                <p>{{Message}}</p>
                            {{/each}}
                       </div>
                    {{/if}}
                     <input type="hidden" value="{{Id}}" name="SelectieId" data-val-required="Trebuie aleasa o selectie de plati" data-val-number="Campul de identificare a selectie trebuie sa fie format dintr-un numar" data-val="true">
                    {{#each DosareSelectate}}
                        <input type="hidden" name="Dosare[0].DosarId" value="{{DosarId}}"/>
                        <input type="hidden" name="Dosare[0].EsteFinal" value="{{IsSelected}}">
                        <input type="hidden" name="Dosare[0].Suma" value='{{Suma}}' data-val-required="E necesara o suma!" data-val-range-min="1" data-val-range-max="{{SumaMaxima}}" data-val-range="Suma trebuie sa fie mai mare decat 0" data-val-number="Suma trebuie sa fie un numar." data-val="true">
                     {{/each}}
                    <div class="control-group required ">
                        <label class="control-label" for="SumaExecutata">Suma</label>
                        <div class="controls">
                            <input type="text"...

JavaScript

(function ($, can) {

    var DosareDauna = can.Model.extend({
        findAll: function() {
            return $.when([{ id : 26}, {id : 27, Titular : "foo" }]) 
        }
    }, {});

    can.Component.extend({
        tag: "executadosare",
        template: can.view("selecteazaDosare"),
        init: function() {
        },
        scope: {
            Count: Infinity,
            Offset: 0,
            Limit: 25,
            Prev: function () {
                //todo
            },
            Next: function () {
                //todo
            },
            CanNext: function () {
                return this.attr('Offset') < this.attr('Count') - this.attr('Limit');
            },
            CanPrev: function () {
                return this.attr('Offset') > 0;
            },
            ToateDosarele: can.compute( function () {
                var self = this;
                var id = self.attr('id');
                dosareDeferred = DosareDauna.findAll({ id: 26 }),
                dosareDeferred.then(function (dosare) {
                    self.attr('Count', dosare.length);
                });
                return dosareDeferred;
            }),
            Dosare : can.compute( function(){
                var self = this;
                var dosare = new can.Model.List();
                self.attr('ToateDosarele').then(function (toateDosarele) {
                    var lazyDosare = [];//def.resolve({ animals: [ 'pig', 'cow' ] })
                    toateDosarele.forEach(function (element, index, list) {
                        if (index >= self.attr('Offset') && index < (self.attr('Offset') + self.attr('Limit'))) {
                            lazyDosare.push(element);
                        }
                    });
                    dosare.replace( lazyDosare );
                });
                return dosare;
            }),
            DosareSelectate: can.compute(function(){
                var self = this;
                var selectate =...