knockout.js - observablearray - knockoutjs book

¿El mejor enfoque para la conversión de valor en KnockoutJS?

Question

He estado tratando de descubrir el enfoque correcto para mostrar / editar valores porcentuales en Knockout-JS (y, en general, cómo debería crear componentes reutilizables como estos).

Mi ViewModel tiene un valor observable que es un porcentaje almacenado como un número fraccionario, por ejemplo, 0.5 para representar el 50%. Me gustaría mostrar y editar el valor en el formato de porcentaje (por ejemplo, ''50'') para que los usuarios no se confundan (se confunden fácilmente).

escribible calculado

Pude una versión simple al configurar una función computable grabable: ver http://jsfiddle.net/Quango/fvpjN/

Sin embargo, esto no es muy reutilizable, ya que tendría que volverse a implementar para cada valor. Experimenté con un extensor, pero esto enmascaró efectivamente el valor subyacente y lo hizo inutilizable.

Encuadernadora

Creo que lo que necesito es un controlador vinculante, así que en lugar de escribir

<input data-bind="value: commission" /> 

Yo escribiría

<input data-bind="percentage: commission" />

Eché un vistazo al código en el "valor" bindingHandler en knockout.js, pero hay un montón de código allí para el enlace y no quiero replicar eso.

Entonces mis preguntas son:

1. ¿Hay una buena / estándar / plantilla para hacer este tipo de conversión de valores?

2. si no, ¿hay alguna manera de reutilizar el enlace de "valor" sin tener que copiar y pegar el código existente?

Answer 1

¿Qué hay de envolver el valor de fracción y el valor de porcentaje juntos para que se convierta en un componente reutilizable:

HTML

<input data-bind="value: p1.value, valueUpdate: ''afterkeydown''"></input>
<h1><span data-bind="text: p1.frac"></span> = <span data-bind="text: p1"></span></h1>

JavaScript

function Percentage(frac) {
    this.frac = ko.observable(frac);
    this.value = ko.computed({
        read: function() {
            return this.frac() * 100;
        },
        write: function(value) {
            this.frac(value/100);
        },
        owner: this
    });
}

Percentage.prototype.toString = function() {
    return this.value() + ''%'';
}

var model = {
    p1: new Percentage(0.5)
}

ko.applyBindings(model)

Demo en vivo

http://jsfiddle.net/9kCkm/1/

Answer 2

Siempre quise escribir un extensor. Así que aquí viene otra respuesta a su pregunta que se implementa a través de un extensor de inactivación.

Todavía estoy indeciso si me gusta este o el que tiene la clase Porcentaje mejor.

HTML

<input data-bind="value: p1.percentage, valueUpdate: ''afterkeydown''"></input>%
= <span data-bind="text: p1"></span>

JavaScript

ko.extenders.percentage = function(target, option) {
    target.percentage = ko.computed({
        read: function() {
            return this() * 100;
        },
        write: function(value) {
            this(value/100);
        },
        owner: target
    });
    return target;
};

var model = {
    p1: ko.observable(0.5).extend({''percentage'': true})
}

ko.applyBindings(model)

Demo en vivo

http://jsfiddle.net/DWRLr/