knockout.js => Introduction des composants

Remarques

Les composants permettent des contrôles / widgets réutilisables représentés par leur propre vue (modèle) et leur propre modèle de vue. Ils ont été ajoutés dans Knockout 3.2. Inspiré des composants WebComposants, Knockout permet aux composants d'être définis en tant qu'éléments personnalisés, ce qui permet l'utilisation d'un balisage plus explicite.

Barre de progression (Boostrap)

Définition du composant

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>'
});

Utilisation HTML

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

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

knockout.js
Introduction des composants

Recherche…

Remarques

Barre de progression (Boostrap)