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

내 ViewModel에는 다음과 같이 한 달의 배열 인 속성 기간이 있습니다.

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

표현식에서 Observable을 사용하는 경우 다음과 같은 함수로 액세스해야합니다.

visible: !charted()

빌트인 hidden바인딩 이 있어야한다는 John Papa의 의견에 동의합니다 . 전용 hidden바인딩 에는 두 가지 이점이 있습니다 .

1. 더 간단한 구문, 즉 hidden: charted대신에 visible: !charted().
2. 녹아웃은 charteda 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 is TRUE"이고 Text2가 표시되지 않으므로 "Text1"만 표시됩니다.

click 이벤트에서 gatherPlacesData를 호출하는 버튼이 있다고 가정 해 봅시다. "true === false is FALSE"이고 Text 2 만 표시되므로 Text1은 표시되지 않습니다.

또 다른 가능한 솔루션은 계산 가능한 관측 가능을 사용할 수 있지만 너무 간단한 문제에 대한 복잡한 솔루션이라고 생각합니다.

또한 다음 과 같이 숨겨진 것을 사용할 수 있습니다 .

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