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

Question

मैं अपने 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);
};

Comments

@ नोको: यह वास्तव में एक नकली सवाल नहीं है। जिस प्रश्न का ओपी आप पहले से ही जानते हैं कि यह संभव है कि अवलोकन के निषेध को डेटा-बाइंड करें, लेकिन आश्चर्य होता है कि इसे फ़ंक्शन की तरह क्यों कहा जाना चाहिए। इस सवाल का ओपी यहाँ पता नहीं था कि पहली जगह में कैसे करना है और जाहिर है कि अन्य सवाल नहीं मिला। मुझे खुशी है कि मुझे यह सवाल यहां मिला - जो इसके वर्णनात्मक शीर्षक के लिए धन्यवाद है।

— ओलिवर

Answer 1

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

visible: !charted()

Comments

शायद हमें एक छिपा हुआ बंधन बनाना चाहिए :) हमारे पास सक्षम और अक्षम है।

— जॉन पापा

क्या दस्तावेज़ीकरण इससे असहमत है, या क्या मैं इस पृष्ठ को पूरी तरह से गलत समझ रहा हूं: knockoutjs.com/documentation/css-binding.html

— शैतान का अधिवक्ता

कोई बात नहीं, मुझे लगता है कि "Severe "एक अवलोकन योग्य नहीं है, लेकिन एक सादे पुरानी संपत्ति है, इस प्रकार मेरा भ्रम।

— डेविल्स एडवोकेट

का उपयोग करते समय! [फंक्शन] सत्य है; [फंक्शन] गलत हो जाता है और यदि आप उस वाक्य रचना का उपयोग करते हैं तो हमेशा गलत होगा। jsfiddle.net/datashaman/E58u2/3

— डेट्रशमैन

उन्होंने वास्तव hiddenमें v3.5.0

— ग्रिन

Answer 2

मैं जॉन पापा की टिप्पणी से सहमत हूं कि एक अंतर्निहित 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>

Comments

इसने बिना वापसी के मेरे लिए काम नहीं कियाreturn !ko.utils.unwrapObservable(valueAccessor());

— मेहमत अता

धन्यवाद @ MehmetAtaş - मैंने hiddenआपकी टिप्पणी के अनुसार बंधन को सही किया । (BTW, मैं अपने प्रोजेक्ट में उस समय मूल रूप से पोस्ट किए गए कॉफ़ीस्क्रिप्ट का उपयोग कर रहा था। कॉफ़ी के सिंटैक्स को यह स्पष्ट नहीं करता है कि जब कोई रिटर्न जानबूझकर होता है।)

— डेव

Answer 3

यह थोड़ा भ्रमित करने वाला है, जैसा आपको करना है

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

Field में जाँच करें http://jsfiddle.net/khanSharp/bgdbm/

Answer 4

आप मेरे स्विच / केस बाइंडिंग का उपयोग कर सकते हैं , जिसमें शामिल हैं 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>

Comments

मुझे बस एहसास हुआ कि यह एक पुराना सवाल है लेकिन आशा है कि यह किसी के लिए उपयोगी हो सकता है।

— माइकल सर्वश्रेष्ठ

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

मैं एक ही समस्या के बारे में एक बूलियन अवलोकन के विपरीत उपयोग करने के लिए कैसे कर रहा था। मुझे एक आसान उपाय मिल गया है:

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>

जब प्रोग्राम केवल "टेक्स्ट 1" शुरू होता है, क्योंकि "गलत === असत्य TRUE है" और टेक्स्ट 2 दिखाई नहीं देता है।

हम कहते हैं कि हमारे पास एक बटन है जो क्लिक इवेंट पर इकट्ठाPlacesData को आमंत्रित करता है। अब Text1 दिखाई नहीं देगा क्योंकि "true === false FALSE" है और Text 2 केवल दिखाई देगा।

एक अन्य संभावित समाधान गणना योग्य अवलोकन का उपयोग किया जा सकता है, लेकिन मुझे लगता है कि इतनी सरल समस्या के लिए एक अतिव्यापी समाधान है।

Answer 8

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

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