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);
};답변
표현식에서 Observable을 사용하는 경우 다음과 같은 함수로 액세스해야합니다.
visible: !charted()
답변
빌트인 hidden바인딩 이 있어야한다는 John Papa의 의견에 동의합니다 . 전용 hidden바인딩 에는 두 가지 이점이 있습니다 .
- 더 간단한 구문, 즉
hidden: charted대신에visible: !charted(). - 녹아웃은
chartedacomputed를 생성하는 대신 관찰 가능 항목을 직접 관찰 할 수 있으므로 리소스가 적습니다!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 is TRUE”이고 Text2가 표시되지 않으므로 “Text1″만 표시됩니다.
click 이벤트에서 gatherPlacesData를 호출하는 버튼이 있다고 가정 해 봅시다. “true === false is FALSE”이고 Text 2 만 표시되므로 Text1은 표시되지 않습니다.
또 다른 가능한 솔루션은 계산 가능한 관측 가능을 사용할 수 있지만 너무 간단한 문제에 대한 복잡한 솔루션이라고 생각합니다.
