Có thể liên kết dữ liệu hiển thị với phủ định (hung!)) Của thuộc tính ViewModel boolean?

Tôi muốn sử dụng một thuộc tính trên ViewModel của mình để chuyển đổi biểu tượng nào sẽ hiển thị mà không tạo thuộc tính được tính toán riêng của nghịch đảo. Điều này có thể không?

<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 của tôi có một khoảng thời gian thuộc tính là một mảng của tháng, như thế này:

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

Khi sử dụng một quan sát trong một biểu thức, bạn cần truy cập nó dưới dạng một hàm như:

visible: !charted()

Tôi đồng ý với nhận xét của John Papa rằng cần phải có một hiddenràng buộc tích hợp. Có hai lợi ích cho một hiddenràng buộc chuyên dụng :

1. Cú pháp đơn giản hơn, tức là. hidden: chartedthay vì visible: !charted().
2. Ít tài nguyên hơn, vì Knockout có thể quan sát chartedtrực tiếp có thể quan sát , thay vì tạo ra một computedquan sát !charted().

Nó đủ đơn giản để tạo ra một hiddenràng buộc, mặc dù, như thế này:

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

Bạn có thể sử dụng nó giống như visibleràng buộc tích hợp:

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

Nó hơi khó hiểu, như bạn phải làm

visible:!showMe()

Tôi cũng vậy

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

mô hình của tôi là

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

Kiểm tra fiddle http://jsfiddle.net/khanSharp/bgdbm/

Bạn có thể sử dụng ràng buộc chuyển đổi / trường hợp của tôi , bao gồm case.visiblevà 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>

Bạn cũng có thể có nó như

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

Để làm cho ràng buộc nhận biết các thay đổi đối với thuộc tính, tôi đã sao chép trình xử lý ràng buộc có thể nhìn thấy và đảo ngược nó:

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

Disclaimer: giải pháp này chỉ dành cho mục đích giải trí.

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

Tôi đã có cùng một vấn đề về cách sử dụng ngược lại với một boolean quan sát được. Tôi đã tìm thấy một giải pháp dễ dàng:

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

};

Bây giờ trên HTML của bạn, bạn nên làm điều này

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

Khi chương trình chỉ bắt đầu, "Text1" hiển thị vì "false === false là TRUE" và Text2 không hiển thị.

Hãy nói rằng chúng ta có một nút để gọi sự kiện tụ tập thay thế trên sự kiện nhấp chuột. Bây giờ Text1 sẽ không hiển thị vì "true === false là FALSE" và Text 2 chỉ hiển thị.

Một giải pháp khả thi khác có thể là sử dụng tính toán có thể quan sát được, nhưng, tôi nghĩ là một giải pháp quá phức tạp cho một vấn đề đơn giản như vậy.

Cũng có thể sử dụng ẩn như thế này:

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