Question

I have a foreach for editing some items.
Each item has a “Save” button. I want to show a message below the button.
How can i show this message inside the click event?
This is the html:

        <div id="divhorarios" data-bind="foreach: horarios">
    <div>
    <label>Fecha Ini: </label><input data-bind="value: FechaIni, datepicker: FechaIni, datepickerOptions: {dateFormat: 'dd/mm/yy'}" />
    <label>Fecha Fin: </label><input data-bind="value: FechaFin, datepicker: FechaFin, datepickerOptions: {dateFormat: 'dd/mm/yy'}" />
     <label>Nombre:</label> <input data-bind="value: Nombre"/>
    <br />
<button data-bind='click: $root.saveHorario'>Guardar</button>
    <br />
    <span data-bind="visible: showGuardado" style=" color: Green;">El horario ha sido guardado</span>
    </div>
    </div>

In the javascript code for the model i set the showGuardado=true but the message is not showing:

var HorariosModel = function (horarios) {
    var self = this;


    self.horarios = ko.observableArray(horarios);


    self.guardarHorario = function (horario) {
        $.post('/admin/horariosjsonguardar/' + idModelo, horario, function (returnedData) {
            horario.showGuardado = true;
        });
    };
};

Answer 1

you haven’t got all the code there, but most likely you need to change it to :-

self.horarios = ko.observableArray([]);
ko.mapping.fromJS(horarios, {}, self.horarios);

which will turn all the things passed in into observables.

however, given the click handler, you actually probablly want something which handles the click on each of the array items, here is a fiddle showing the code in action :-

http://jsfiddle.net/keith_nicholas/UqFP2/

this way each button is independent and each has its own wee green message.

NOTE: I changed the datepicker to a simple input and got rid of the post just for the example…