Veri bağlama, bir boolean ViewModel özelliğinin olumsuzluğu ("!") Ile görülebilir mi?

Question

ViewModel'imdeki bir özelliği kullanmak için, hangi simgenin, tersin ayrı bir hesaplanmış özelliği oluşturmadan görüntüleneceğini değiştirmek istiyorum. Mümkün mü?

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

Answer 1

bir ifadede gözlemlenebilir kullanarak gibi bir fonksiyonu olarak erişmesi gereken:

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

Benim ViewModel böyle ayın bir dizidir bir özellik dönemleri vardır

visible: !charted()

Answer 2

Benyerleşik olması gerektiğini John Papa yorumuna katılıyorumbağlama.

1. basit sözdizimi, yani: bağlayıcı adanmış hidden iki faydası vardır. visible: !charted() yerine hidden: charted.
2. Knockout, computed'u !charted() gözlemlemek yerine, gözlemlenebilir charted doğrudan gözlemleyebileceğinden, daha az kaynak.

Böyle olsa da, bir hidden bağlayıcı yaratacak kadar basit:

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

Sadece gibi kullanabilirsiniz yerleşik visible bağlayıcı:

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

Answer 3

Şunları kullanabilirsiniz case.visible ve casenot.visible'u içeren switch/case bağlayıcım.

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

Ayrıca

visible:!showMe() 

yapmak zorunda olduğu

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

benim modeldir Bu biraz kafa karıştırıcı, bu yüzden, ben

yaptım oluyor

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

Answer 4

olarak olabilir

Turp içinde

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

onay özelliğine değişikliklerin bağlayıcı haberdar etmek amacıyla http://jsfiddle.net/khanSharp/bgdbm/

Answer 5

, ben görünür bağlanma işleyicisi kopyalanmış ve onu ters:

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

Answer 6

Destek bu çözümü Sadece eğlence amaçlı kullanıma uygundur.

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

Answer 7

Ayrıca böyle gizli kullanabilirsiniz:

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