How to bind a collection of viewmodel in knockout

Question

First of all, I'm quite new to knockout but I know the MVVM pattern it uses since I've done it in WPF a lot of time... by the way I've the following desiderata.

I need to populate a bootstrap grid with a list of artist types and the number of artists that will be present. Setting the number it should calculate the total per row.

Here's my .cshtml (but it applies to other languages as well)

<div class="container" id="composizioneArtistiContainer">
    <div data-bind="foreach: RenderedArtisti">
        <div class="row">
            <div class="col-md-2">
                <p data-bind="text: descrizione" />
            </div>

            <div class="col-md-2">
                <input id="inpDataRichiesta" type="text" class="form-control" data-bind="value: numero" />
            </div>

            <div class="col-md-2">
                <p data-bind="text: prezzo" />
            </div>

            <div class="col-md-2">
                <p data-bind="text: totalePrezzo" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2">
             Spese fisse
        </div>
        
        <div class="col-md-4">
            
        </div>

        <div class="col-md-2">
            <p data-bind="text: SpesaFissa" />
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-2">
            Totale spese 
        </div>
        
        <div class="col-md-4">
            
        </div>

        <div class="col-md-2">
            <p data-bind="text: TotaleSpese" />
        </div>
    </div>
</div>

Now inside the viewmodel I've:

function ComposizionePrenotazioneArtistiViewModel() {
    var self = this;
    self.SpesaFissa = 70;
    self.RenderedArtisti = ko.observableArray([]);
    self.TotaleSpese = ko.computed(function() {
        return self.SpesaFissa;
    });

    GetRenderedAssociazioneArtistiPrenotazione(self.RenderedArtisti);
}

and there it's the js file

$(document).ready(function () {
    ko.applyBindings(new ComposizionePrenotazioneArtistiViewModel(), document.getElementById("composizioneArtistiContainer"));
});

function GetRenderedAssociazioneArtistiPrenotazione(artisti) {

    AjaxRequest(
        BaseUrlJumpApiClownOnDemand + 'api/artistaTipo/',
        'GET',
        null,
        function (response) {
            var arrayLength = response.length;
            for (var i = 0; i < arrayLength; i++) {
                artisti.push({
                    descrizione: response[i].descrizione,
                    codice: response[i].codice,
                    prezzo: response[i].prezzo,
                    numero: 1,
                    totalePrezzo: ko.pureComputed(function () {
                        return self.numero;
                    })
                });
            }
        },
        function (jqXHR, textStatus, errorThrown) {
            ShowErrorService(jqXHR, textStatus, errorThrown);
        });

...OMISS...

I think I am doing something wrong with the artisti passed since when I update the number of 'numero' it doesn't recalculate the TotalePrezzo.

Any advice?

Thanks

Answer 1

You need to add a function where to save each 'artistaTipo':

function ArtistaTipo(artistaTipo) {
  let self = this;
  this.descrizione = ko.observable( artistaTipo.descrizione);
  this.codice = ko.observable( artistaTipo.codice);
  this.prezzo = ko.observable( artistaTipo.prezzo);
  this.numero = ko.observable(1);
  
  self.totalePrezzo = ko.pureComputed(function() {
    return self.numero();
  })    
}

All fields are observable because you have a computed observable.

And then modify the push in your GetRenderedAssociazioneArtistiPrenotazione:

function GetRenderedAssociazioneArtistiPrenotazione(artisti) {

    AjaxRequest(
        BaseUrlJumpApiClownOnDemand + 'api/artistaTipo/',
        'GET',
        null,
        function (response) {
            var arrayLength = response.length;
            for (var i = 0; i < arrayLength; i++) {
                artisti.push( 
                   new ArtistaTipo(response[i])
                );
            }
        },
        function (jqXHR, textStatus, errorThrown) {
            ShowErrorService(jqXHR, textStatus, errorThrown);
        }
    );
}

Here it is a fiddle. I changet the Ajax call for a hardcoded array.