knockout playground

by Alejandro Hernández

HTML

<script src="https://github.com/knockout/knockout/releases/download/v3.3.0/knockout-3.3.0.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<div class="legible">Knockout playground</div>

<ul data-bind="foreach: documentos">
    <li>
        <input type="checkbox" data-bind="attr: { value: id, id:'chk_' + id }
                                                , checked: $root.sel
                                                , checkedValue : id
                                                , text : 'aa'    
                                                ">fasdf</input>
        <label data-bind="attr:{ for: 'chk_' + id }, text: nro"></label>
        [<span data-bind="text: $root.formatFecha(fecha)"></span>]
    </li>
</ul>

<div class="legible">
    ViewModel: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
</div>

CSS

.legible {
    border: 1px solid brown;
    padding: 2px;
    margin-bottom: 2px;
}

JavaScript

var vm = function(){
    var self = this;
    self.documentos = ko.observableArray([
        {
            id: 28,
            nro: 'CC-45477'
            ,fecha: new Date(2012,12-1,25)
        },
        {
            id: 22,
            nro: 'CC-45470'
            ,fecha: new moment().add(-43,'days').add(1, 'years').toDate()
        },
        {
            id: 21,
            nro: 'AA-009-4778557'
            ,fecha: new Date()
        }
    ]);
                         
    self.sel =  ko.observableArray([28,21]); //Esto bindea contra el campo especificado como 'value' del checkbox
    
    self.formatFecha = function(fecha){
        var patron = 'DD/MM/YYYY';
        var res = moment(fecha).format(patron);  //Utiliza moment.js        
        return res;
    }
};
ko.applyBindings(new vm());