Tengo un gráfico gráfico a continuación hizo uso de css y knockout.js (la unión)

Dependiendo del valor de los datos, necesito el tamaño de la altura de las barras mediante la selección de diferentes clases css.

He tratado de usar el knock-out si la declaración a continuación:

The <!-- ko --> and <!-- /ko --> 

Sin embargo, esto no cumplir con mi obligación como necesito algo como la siguiente:

     <ul data-bind="foreach: ArrayData">
      <!-- ko if: value >= 300 and value <=250 -->
            <li class="height300Css">
        <!-- /ko -->
       <!-- ko if: value >= 200 and value <=300 -->
            <li class="height200Css">
        <!-- /ko -->
    </ul>

Podría alguien sugerir las alternativas?

Gracias.

OriginalEl autor Nil Pun | 2012-05-23

2 Comentarios

  1. 13

    Agregar un calculada observable a su modelo de vista que devuelve el correcto css de la clase, a continuación, utilizar la «attr» de unión (http://knockoutjs.com/documentation/attr-binding.html).

    O utilizar el «css» de unión, sino que requiere que usted tenga toda la lógica de la selección en la vista de archivo.


    Ejemplo de código:

    var ViewModel = function() {
        var self = this;
    
        //....
    
        self.cssClass = ko.computed(function() {
            var value = self.value();
            if (value >= 300 && value <= 250) {
                return 'height300Css';
            }
            //...
        };
    };

    Y en la vista:

    <li data-bind="attr: { class: cssClass }"> 

    Si usted está tratando con un array de objetos, puede agregar la calculada observables de los objetos o usted puede agregar una función normal de la vista del modelo y de la llamada durante el bucle foreach.

    var ViewModel = function() {
        var self = this;
    
        self.items = ko.observableArray(...);
    
        self.getCssClass = function(item) {
            var value = item.value();
            //...
        };
    };

    Y en la vista:

    <li data-bind="attr: { class: $root.getCssClass($data) }">

    Demo: http://jsbin.com/awacew

    Gracias @Niko, que si es un solo objeto. En mi caso es una matriz de objetos. Estoy usando foreach en el exterior div primera. Han actualizado la pregunta.
    Así que, o bien ampliar los objetos de la matriz, o el uso de una función normal y la mano sobre el elemento actual. Voy a agregar un ejemplo a mi respuesta!
    Una pequeña adición de uso «attr: { ‘class’: $root.getCssClass($datos) }», de lo contrario, se producirá un error en IE <=7. Como recuerdo de este problema está previsto para ser fijo, pero en versión 2.0 es todavía existen. No ha comprobado 2.1
    Usted todavía necesita las comillas alrededor de class en IE, pero 2.1 corrige el problema de que el class atributo no funciona en IE<7 (y había que incluir también className).
    Knockout 2.2 permitirá el uso de la css enlace en lugar de attr/class para establecer una dinámica de clase. Así, entonces usted podría hacer data-bind="css: cssClass". En tanto, usted puede usar mi class enlace personalizado para hacer la misma cosa. Ambos tienen la ventaja de que no clobbering existentes, la estática de las clases en el elemento. Aquí está un violín lo que demuestra la class de unión.

    OriginalEl autor Niko

  2. 3

    Usted puede simplemente utilizar el css de unión?

    <ul id="MyList" data-bind="foreach:list">
        <li>
            <span data-bind="text: value, css: { height300Css: value >= 250 && value <= 300, height200Css: value >= 200 && value < 250 }"></span>
        </li>
    </ul>

    Por CIERTO, estoy seguro de que es la pseudocódigo, pero el valor no puede nunca ser >= 300 Y <= 250, y usted necesita usar && en lugar de ‘y’, así que he cambiado las expresiones para mi violín así 200-249 sería rojo y 250-300 sería azul.

    Gran solución, pero tenía que aceptar la otra solución, ya que es más mantainable.
    Esta es una forma mucho mejor para hacerlo. IMO

    OriginalEl autor Jason Goemaat

Dejar respuesta

Please enter your comment!
Please enter your name here