是否有可能將數據綁定可見到布爾ViewModel屬性的否定（「！」）？

145

我想使用我的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>

我的視圖模型有一個屬性週期是一個月的數組，像這樣：

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

來源

2012-04-11 agradl

@Niko：這不是一個真正的重複問題。你提到的問題的OP已經知道**可以將可觀察數據的否定與數據綁定，但是爲什麼需要像函數那樣調用它。這個問題的OP在這裏並不知道如何去做，顯然沒有找到其他問題。我很高興我在這裏發現了這個問題 - 這主要歸功於它的描述性標題。 – Oliver 2013-05-14 11:32:47

251

當在表達式中使用可觀察到的，你需要訪問它像一個功能：

visible: !charted()

來源

2012-04-11 21:58:14

+30

也許我們應該做一個隱藏的綁定:)我們已啓用和禁用。 – 2012-04-11 23:21:23

文檔是否不同意這個，或者我完全誤解了這個頁面：http://knockoutjs.com/documentation/css-binding.html – 2013-06-15 20:17:49

沒關係，我猜「isSevere」不是一個可觀察的，而是一個普通的舊屬性，因此我的困惑。 – 2013-06-15 20:19:30

我與約翰爸爸的意見都認爲應該有一個內置hidden綁定。專用hidden綁定有兩個好處：

更簡單的語法，即。 hidden: charted而不是visible: !charted()。
較少的資源，因爲Knockout可以直接觀察到可觀察的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>

來源

2012-05-13 17:35:57 Dave

這沒有爲我工作，沒有返回'return！ko.utils.unwrapObservable（valueAccessor（））;' – 2013-03-31 17:31:02

謝謝@MehmetAtaş - 我更正了'隱藏'綁定您的評論。（順便說一下，我在我的項目中使用CoffeeScript的原始時間，當返回是故意的時候，CoffeeScript的語法並不明顯） – Dave 2013-10-30 05:05:34

你可以使用我的switch/case綁定，其中包括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>

來源

2012-08-28 20:40:33

我剛剛意識到這是一個老問題，但希望這對於有人。 – 2012-08-28 20:44:00

它有點混亂，因爲你必須做

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/

來源

2013-01-04 17:29:02 KhanSharp

爲了使結合意識到改變的財產，我複製可見綁定處理程序和倒它：

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

來源

2013-04-14 10:19:27

免責聲明：本解決方案僅用於娛樂目的。

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

來源

2016-04-17 14:44:25

-1

也可以使用隱藏這樣的：

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

來源

2017-05-31 08:04:42

是否有可能將數據綁定可見到布爾ViewModel屬性的否定（「！」）？

回答

相關問題