164

逆の別の計算されたプロパティを作成せずに、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>

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

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

8 に答える 8

286

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

visible: !charted()

于 2012-04-11T21:58:14.510 に答える
53

hiddenビルトインバインディングが必要だというジョンパパのコメントに同意します。専用hiddenバインディングには 2 つの利点があります。

  1. より単純な構文、つまり。hidden: chartedの代わりにvisible: !charted()。
  2. ノックアウトは監視対象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>
于 2012-05-13T17:35:57.823 に答える
10

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

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/

于 2013-01-04T17:29:02.513 に答える
4

と を含む、私のswitch/caseバインディングを使用できます。case.visiblecasenot.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>
于 2012-08-28T20:40:33.650 に答える
1

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

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 = "";
    }
};
于 2013-04-14T10:19:27.227 に答える