knockout.js => Introducción de componentes

Observaciones

Los componentes permiten controles / widgets reutilizables representados por su propia vista (plantilla) y viewmodel. Fueron agregados en Knockout 3.2. Inspirado por WebComponents, Knockout permite que los componentes se definan como elementos personalizados, lo que permite el uso de un marcado más autoexplicativo.

Barra de progreso (Boostrap)

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

Uso de html

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

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

knockout.js
Introducción de componentes

Buscar..

Observaciones

Barra de progreso (Boostrap)