knockout.js => Introduzione ai componenti

Osservazioni

I componenti consentono controlli / widget riutilizzabili rappresentati dalla propria vista (modello) e dal modello viewmodel. Sono stati aggiunti in Knockout 3.2. Ispirato da WebComponents, Knockout consente ai componenti di essere definiti come elementi personalizzati, consentendo l'uso di un markup autoesplicativo.

Barra di avanzamento (Boostrap)

Definizione del componente

ko.components.register('progress-bar', {
    viewModel: function(params) {
            var that = this;
    
        // progress is a numeric value between 0 and 100
        that.progress = params.progress;
        
        
        that.progressPercentual = ko.computed(function(){
            return '' + ko.utils.unwrapObservable(that.progress) + '%';
        })
    },
    template:
        '<div class="progress"> <div data-bind="attr:{\'aria-valuenow\':progress}, style:{width:progressPercentual}, text:progressPercentual" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"></div> </div>'
});

Utilizzo HTML

<progress-bar params="progress:5"></progress-bar>

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

knockout.js
Introduzione ai componenti

Ricerca…

Osservazioni

Barra di avanzamento (Boostrap)