क्या बूलियन व्यूमोडेल संपत्ति की अस्वीकृति ("!") के लिए दृश्यमान डेटा-बाइंड संभव है?

Question

मैं अपने व्यूमोडेल पर एक संपत्ति का उपयोग करना चाहता हूं ताकि उलटा की एक अलग गणना की गई संपत्ति के बिना प्रदर्शित करने के लिए कौन सा आइकन प्रदर्शित किया जा सके। क्या यह संभव है?

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

Answer 1

एक अभिव्यक्ति में एक नमूदार का उपयोग करते समय आप की तरह एक समारोह के रूप में इसे का उपयोग करने की आवश्यकता है:

<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 एक संपत्ति अवधि जो महीने की एक सरणी है, इस तरह है

visible: !charted()

Answer 2

मैं जॉन पिताजी के टिप्पणी के साथ सहमत हैं कि वहाँ एकमें निर्मित किया जाना चाहिएबाध्यकारी। समर्पित hidden बाध्यकारी के लिए दो लाभ हैं:

1. सरल वाक्यविन्यास, यानी। के बजाय hidden: charted।
2. कम संसाधन, चूंकि !charted() का निरीक्षण करने के लिए computed बनाने के बजाय, नॉकआउट charted को देखने योग्य 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> 

Answer 3

आप इस्तेमाल कर सकते हैं मेरा 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> 

Answer 4

यह थोड़ा भ्रामक है, के रूप में आप

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/

Answer 5

आदेश प्रॉपर्टी में परिवर्तन के बारे में पता बाध्यकारी बनाने के लिए, मैं दिखाई बाध्यकारी हैंडलर की नकल की और यह उलटा:

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

अस्वीकरण: इस समाधान मनोरंजन प्रयोजनों के लिए ही है।

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

इसके अलावा छिपा इस तरह उपयोग कर सकते हैं:

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