ブールViewModelプロパティの否定（「！」）にデータバインドを表示することは可能ですか？

ViewModelのプロパティを使用して、逆の個別の計算されたプロパティを作成せずに、表示するアイコンを切り替えたいと思います。これは可能ですか？

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

My ViewModelには、次のように月の配列であるプロパティの期間があります。

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

式でオブザーバブルを使用する場合は、次のような関数としてアクセスする必要があります。

visible: !charted()

組み込みのhiddenバインディングがあるべきだというジョンパパのコメントに同意します。専用hiddenバインディングには2つの利点があります。

1. よりシンプルな構文、すなわち。hidden: chartedの代わりにvisible: !charted()。
2. Knockoutは、観察chartedするを作成するのではなく、オブザーバブルを直接観察できるため、リソースが少なくcomputedなります!charted()。

作成するのに十分簡単です hiddenただし、次のようにバインディングです。

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

組み込みのvisibleバインディングと同じように使用できます。

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

あなたがしなければならないので、それは少し混乱しています

visible:!showMe()

そう、私はやった

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

私のモデルは

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

フィドルでチェックインhttp://jsfiddle.net/khanSharp/bgdbm/

あなたは私の使用することができますスイッチ/ケースが含まれ、結合case.visibleと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>

次のようにすることもできます

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

プロパティへの変更をバインディングに認識させるために、可視のバインディングハンドラーをコピーして反転しました。

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 = "";
    }
};

免責事項：このソリューションは、娯楽目的でのみ使用できます。

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

私はブールのオブザーバブルの反対を使用する方法について同じ問題を抱えていました。私は簡単な解決策を見つけました：

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

};

あなたのHTMLでこれを行う必要があります

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

プログラムが起動すると、「false === falseはTRUE」であり、Text2が表示されないため、「Text1」のみが表示されます。

クリックイベントでgatherPlacesDataを呼び出すボタンがあるとしましょう。「true === falseはFALSE」であり、Text 2のみが表示されるため、Text1は表示されません。

別の可能な解決策は、計算された観察可能なものを使用することかもしれませんが、私は非常に単純な問題の複雑すぎる解決策だと思います。

このように非表示を使用することもできます：

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