Est-il possible de données-liaison visible à la négation (“!”) d'un booléen ViewModel de la propriété?

Je voudrais utiliser une propriété sur mon ViewModel pour basculer l'icône à afficher sans créer un autre calculée de la propriété de l'inverse. Est-ce possible?

<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>

Mon ViewModel a une propriété périodes qui est un tableau de mois, comme ceci:

var month = function() {
    this.charted = ko.observable(false);
};
  • Ce n'est pas vraiment une double question. L'OP de la question que vous consultez le savait déjà il est possible de données lié à la négation d'un fait observable, mais se demande pourquoi elle doit être appelée comme une fonction. Cette question de l'OP ici ne savais pas comment le faire, en premier lieu, et, évidemment, n'a pas trouvé d'autres question. Je suis heureux que j'ai trouvé à cette question - qui est surtout grâce à son titre descriptif.
InformationsquelleAutor agradl | 2012-04-11
  1. 273

    Lors de l'utilisation d'un observable en une expression que vous avez besoin d'y accéder dans une fonction comme:

    visible: !charted()

    • Nous devrions peut-être faire une liaison cachée 🙂 Nous avons d'activer et de désactiver.
    • La documentation en désaccord avec cela, ou suis-je totalement à l'incompréhension de cette page: knockoutjs.com/documentation/css-binding.html
    • Tant pis, je suppose que "isSevere" n'est pas observable, mais un simple vieux de la propriété, donc ma confusion.
    • Lors de l'utilisation !tracé, vous obtenez ![Function]. [Function] est truthy, ![Fonction] devient faux et sera toujours faux si vous utilisez cette syntaxe. jsfiddle.net/datashaman/E58u2/3
    • Je souhaite que cela a été plus clair dans la documentation.
    • Ils ont effectivement ajouté hidden de liaison de v3.5.0

    InformationsquelleAutor RP Niemeyer
  2. 53

    Je suis d'accord avec Jean-Papa du commentaire qu'il devrait être intégré dans hidden de liaison. Il y a deux avantages à la hidden de liaison:

    1. Syntaxe plus simple, c'est à dire. hidden: charted au lieu de visible: !charted().
    2. Moins de ressources, depuis knock-out peut observer les observables charted directement, plutôt que de créer un computed d'observer !charted().

    Il est assez simple de créer un hidden de liaison, même si, comme ceci:

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

    Vous pouvez l'utiliser comme le haut- visible de liaison:

    <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>
    • cela n'a pas fonctionné pour moi sans retour return !ko.utils.unwrapObservable(valueAccessor());
    • Merci @MehmetAtaş - j'ai corrigé le hidden de liaison par votre commentaire. (BTW, j'ai été en utilisant CoffeeScript dans mon projet, au moment où j'ai posté cette origine. CoffeeScript est la syntaxe n'est pas évident lorsque le retour est volontaire.)
    InformationsquelleAutor Dave
  3. 9

    C'est peu déroutant, comme vous l'avez fait

    visible:!showMe()

    donc, je n'ai

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

    mon modèle est

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

    vérifiez dans le violon http://jsfiddle.net/khanSharp/bgdbm/

    InformationsquelleAutor Jhankar Mahbub
  4. 4

    Vous pouvez utiliser mon interrupteur/cas de liaison, qui comprend case.visible et 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>

    Vous pourriez également avoir comme

            <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>
    • Je viens de réaliser que c'est une vieille question, mais espérons que cela pourrait être utile à quelqu'un.
    InformationsquelleAutor Michael Best
  5. 1

    Afin de faire la liaison au courant des changements dans la propriété, j'ai copié le visible de liaison gestionnaire et inversé c':

    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 = "";
    }
};
    InformationsquelleAutor Yogev Smila
  6. 0

    Avertissement: cette solution est pour fins de divertissement seulement.

    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
-->
    InformationsquelleAutor THX-1138
  7. 0

    J'ai eu le même problème sur la façon d'utiliser l'un en face de l'un booléen observables. J'ai trouvé une solution facile:

    var ViewModel = function () {
var self = this;

//When program start, this is set to FALSE
self.isSearchContentValid = ko.observable(false);


self.gatherPlacesData = function () {

   //When user click a button, the value become TRUE
   self.isSearchContentValid(true);

};

    Maintenant sur votre code HTML ce faire, vous devez

    <p data-bind = "visible:isSearchContentValid() === false"> Text 1</p>
<p data-bind = "visible:isSearchContentValid"> Text 2</p>

    Lorsque le programme démarre seulement "Texte1" est visible à cause de "faux===false TRUE" et Texte2 n'est pas visible.

    Permet de dire que nous avons un bouton qui appelle la gatherPlacesData sur l'événement click. Maintenant Texte1 ne sera pas visible, car le "vrai === faux est FAUX" et le Texte 2 ne sera visible.

    Une autre solution possible pourrait être calculée à l'aide de observables, mais, je pense que c'est une trop compliqué solution pour un problème simple.

    InformationsquelleAutor ccastanedag
  8. -1

    Pouvez également utiliser la caché comme ceci:

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