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には、次のように月の配列であるプロパティ期間があります。
var month = function() {
this.charted = ko.observable(false);
};
式でオブザーバブルを使用する場合、次のような関数としてそれにアクセスする必要があります。
visible: !charted()
ビルトインhidden
バインディングが必要であるというJohn Papaのコメントに同意します。専用のhidden
バインディングには2つの利点があります。
visible: !charted()
の代わりにhidden: charted
。charted
を作成して!charted()
を監視するのではなく、オブザーバブルcomputed
を直接監視できるため、リソースが少なくなります。ただし、次のように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
を含むmy switch/case バインディングを使用できます。
<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」のみが表示されます。
ClickイベントでgatherPlacesDataを呼び出すボタンがあるとしましょう。 「true === falseはFALSE」であり、Text 2のみが表示されるため、Text1は表示されなくなります。
別の可能な解決策は、計算されたオブザーバブルを使用することですが、非常に単純な問題に対する複雑すぎる解決策だと思います。