knockout.js - attribute - knockout visible

¿Es posible vincular datos visibles a la negación("!") De una propiedad booleana de ViewModel?

Question

Me gustaría usar una propiedad en mi ViewModel para alternar qué ícono mostrar sin crear una propiedad computada separada de la inversa. es posible?

<tbody data-bind="foreach: periods">
  <tr>
    <td>
      <i class="icon-search" data-bind="visible: !charted, click: $parent.pie_it"></i>
      <i class="icon-remove" data-bind="visible: charted, click: $parent.pie_it"></i>
    </td>
  </tr>
</tbody>

Mi ViewModel tiene un período de propiedad que es una matriz de meses, como esta:

var month = function() {
    this.charted = ko.observable(false);
};

Answer 1

Al usar un elemento observable en una expresión, debe acceder a él como una función como:

visible: !charted()

Answer 2

Descargo de responsabilidad: esta solución es solo para fines de entretenimiento.

ko.extenders.not = function (target) {
    target.not = ko.computed(function () {
        return !target();
    });
};

self.foo = ko.observable(true).extend({ not: null });

<div data-bind="text: foo"></div>     <!-- true -->
<div data-bind="text: foo.not"></div> <!-- false -->

<!-- unfortunately I can''t think of a way to be able to use:
    text: foo...not
-->

Answer 3

Es un poco confuso, ya que tienes que hacer

visible:!showMe()

Así que lo hice

<span data-bind="visible:showMe">Show</span>
<span data-bind="visible:!showMe()">Hide</span>
<label><input type="checkbox" data-bind="checked:showMe"/>toggle</label>​

mi modelo es

var myModel={
    showMe:ko.observable(true)
}
ko.applyBindings(myModel);    

Check in fiddle http://jsfiddle.net/khanSharp/bgdbm/

Answer 4

Estoy de acuerdo con el comentario de John Papa de que debería haber un enlace hidden incorporado. Hay dos ventajas para un enlace hidden dedicado:

1. Sintaxis más simple, es decir. hidden: charted lugar de visible: !charted() .
2. Menos recursos, ya que Knockout puede observar el charted observable directamente, en lugar de crear un computed para observar !charted() .

Sin embargo, es lo suficientemente simple como para crear un enlace hidden , así:

ko.bindingHandlers.hidden = {
  update: function(element, valueAccessor) {
    ko.bindingHandlers.visible.update(element, function() {
      return !ko.utils.unwrapObservable(valueAccessor());
    });
  }
};

Puede usarlo igual que el enlace visible incorporado:

<i class="icon-search" data-bind="hidden: charted, click: $parent.pie_it"></i>
<i class="icon-remove" data-bind="visible: charted, click: $parent.pie_it"></i>

Answer 5

Para que el enlace tenga conocimiento de los cambios en la propiedad, copié el controlador de enlace visible y lo invertí:

ko.bindingHandlers.hidden = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var isCurrentlyHidden = !(element.style.display == "");
        if (value && !isCurrentlyHidden)
            element.style.display = "none";
        else if ((!value) && isCurrentlyHidden)
            element.style.display = "";
    }
};

Answer 6

Puede usar mi enlace switch/case enlace de switch/case , que incluye case.visible y casenot.visible .

<tbody data-bind="foreach: periods">
    <tr>
        <td data-bind="switch: true">
        <i class="icon-search" data-bind="case.visible: $else, click: $parent.pie_it"></i>
        <i class="icon-remove" data-bind="case.visible: charted, click: $parent.pie_it"></i>
        </td>
    </tr>
</tbody>

También podría tenerlo como

        <i class="icon-search" data-bind="casenot.visible: charted, click: $parent.pie_it"></i>
        <i class="icon-remove" data-bind="case.visible: $else, click: $parent.pie_it"></i>

Answer 7

También puede usar oculto así:

 <div data-bind="hidden: isString">
                            <input type="text" class="form-control" data-bind="value: settingValue" />
                        </div>