Чи можна прив'язувати дані, видимі до заперечення ("!") Булевого властивості 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);
};

Використовуючи спостережуваний в виразі, вам потрібно отримати доступ до нього як до функції:

visible: !charted()

Я погоджуюся з коментарем Джона Папи про те, що має бути вбудована hiddenприв'язка. До цільового hiddenзв’язку є дві переваги :

1. Простіший синтаксис, тобто. hidden: chartedзамість visible: !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);    

Реєстрація у скрипці 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>

Коли програма запускається, видно лише "Text1", оскільки "false === false - ІСТИНА", а Text2 - не видно.

Скажімо, у нас є кнопка, яка викликає подію збиранняPlacesData при натисканні. Тепер Text1 не буде видно, тому що "true === false FALSE", а Text 2 - видимий.

Іншим можливим рішенням може бути використання обчислених спостережуваних, але, я думаю, це надскладне рішення для такої простої проблеми.

Також можна використовувати приховане так:

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