เป็นไปได้ไหมที่ data-bind จะปรากฏต่อการปฏิเสธ (“!”) ของคุณสมบัติ 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>

My ViewModel มีระยะเวลาคุณสมบัติซึ่งเป็นอาร์เรย์ของเดือนเช่นนี้

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

เมื่อใช้สิ่งที่สังเกตได้ในนิพจน์คุณต้องเข้าถึงมันเป็นฟังก์ชั่นเช่น:

visible: !charted()

ฉันเห็นด้วยกับความคิดเห็นของจอห์นปาปาว่าควรมีการhiddenผูกมัดในตัว มีประโยชน์สองประการสำหรับการhiddenโยงเฉพาะ:

1. ไวยากรณ์ที่เรียบง่ายคือ แทนhidden: chartedvisible: !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>

มันสับสนเล็กน้อยตามที่คุณต้องทำ

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

Check in fiddle http://jsfiddle.net/khanSharp/bgdbm/

คุณสามารถใช้ของฉันสวิตช์ / กรณีที่มีผลผูกพันซึ่งรวมถึงและ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>

ในการทำให้การเชื่อมโยงตระหนักถึงการเปลี่ยนแปลงคุณสมบัติฉันได้คัดลอกตัวจัดการการเชื่อมที่มองเห็นได้และกลับด้าน:

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>

เมื่อโปรแกรมเริ่มทำงานเฉพาะ "Text1" จะปรากฏให้เห็นเพราะ "false === false คือ TRUE" และมองไม่เห็น Text2

ช่วยบอกว่าเรามีปุ่มที่เรียกใช้ gatherPacesData เมื่อคลิกเหตุการณ์ ตอนนี้ Text1 จะไม่ปรากฏเนื่องจาก "true === false เป็น FALSE" และข้อความ 2 จะมองเห็นได้เท่านั้น

อีกวิธีที่เป็นไปได้อาจใช้การคำนวณที่สังเกตได้ แต่ฉันคิดว่าเป็นวิธีการแก้ปัญหาที่ซับซ้อนสำหรับปัญหาง่าย ๆ

นอกจากนี้ยังสามารถใช้ซ่อนอยู่เช่นนี้

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