Estoy jugando con knockout.js para agregar y eliminar campos en un formulario. Hasta ahora funciona bien, sin embargo necesito un datepicker opción, así que he usado jQuery UI datepicker. Esto funciona, pero sólo en el primer selector de fecha, no en otro lugar. Así que cada vez que haga clic en ‘Agregar’ tengo nuevos campos, pero no datepicker.

Busqué en google y seached StackExchange, pero no encontrar una solución sobre la copia de los campos.

HTML

<table data-bind='visible: beschikkingen().length > 0'>
            <thead>
                <tr>
                    <th>Beschikkingsdatum</th>
                    <th>Beschikkingsnr</th>
                    <th />
                </tr>
            </thead>
            <tbody data-bind='foreach: beschikkingen'>
                <tr>
                    <td><input name="beschikkingsdatum[]" type="text" class="beschikkingsdatum" value="" data-bind='value: beschikkingsdatum, uniqueName: true' /> </td>
                    <td><input class='required number' data-bind='value: beschikkingsnummer, uniqueName: true' /></td>
                    <td><a href='#' data-bind='click: $root.removebeschikking'>Delete</a></td>
                </tr>
            </tbody>
        </table>

Knockout.JS

var beschikkingModel = function(beschikkingen) {
    var self = this;
    self.beschikkingen = ko.observableArray(beschikkingen);

    self.addbeschikking = function() {
        self.beschikkingen.push({
            beschikkingsdatum: "",
            beschikkingsnummer: ""
        });
    };

    self.removebeschikking = function(beschikking) {
        self.beschikkingen.remove(beschikking);
    };

    self.save = function(form) {
        alert("Could now transmit to server: " + ko.utils.stringifyJson(self.beschikkingen));
        //To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.beschikkingen);
    };
};

var viewModel = new beschikkingModel([
    {
        beschikkingsdatum: "",
        beschikkingsnummer: ""
    }
]);
ko.applyBindings(viewModel);

//Activate jQuery Validation
$("form").validate({ submitHandler: viewModel.save });
//]]>  

Datepicker

$(window).load(function(){
$('.beschikkingsdatum').datepicker({
    dateFormat: 'dd-mm-yy',
    constrainInput: false
});
});
intenta usando el enlace de la pregunta que realiza el enlace: stackoverflow.com/questions/6612705/…

OriginalEl autor mat | 2012-11-29

1 Comentario

  1. 11

    El uso de un enlace personalizado controlador puede resolver su problema:

    ko.bindingHandlers.datepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var options = allBindingsAccessor().datepickerOptions || {};
            $(element).datepicker(options);
    
            //handle the field changing
            ko.utils.registerEventHandler(element, "change", function () {
                var observable = valueAccessor();
                observable($(element).datepicker("getDate"));
            });
    
            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });
        }
    };

    Y en HTML:

    <input data-bind='datepicker: beschikkingsdatum' />

    Aquí es el trabajo de violín: http://jsfiddle.net/QUxyy/

    Es probable que se quiere controlar también el update función de modo que los cambios en el modelo de vista lado se vería reflejado en el campo como en la respuesta a la pregunta que él vinculadas
    Gracias! Voy a revisar esto. Yo upvoted y aceptado.
    El script funciona, gracias por eso, pero ahora dos cuestiones aparecen: 1. La validación de los actos raro. Por ejemplo, sólo funciona en la inicial de los campos. 2. El selector de fecha se mantiene activa cuando hago clic fuera del campo.
    Creo que he resuelto 1 jsfiddle.net/QUxyy/5
    No funciona en IE.. stackoverflow.com/questions/13744270/…

    OriginalEl autor gbs

Dejar respuesta

Please enter your comment!
Please enter your name here