डेटा-बाउंड व्यूज़ में इफ़-एल्स संरचनाओं को टेम्प्लेट कैसे करें?

Question

मैं लगातार स्वयं को KO- आधारित HTML टेम्प्लेट में इस मुहावरे का उपयोग कर पाता हूं:

<!-- ko if: isEdit -->
<td><input type="text" name="email" data-bind="value: email" /></td>
<!-- /ko -->
<!-- ko ifnot: isEdit -->
<td data-bind="text: email"></td>
<!-- /ko -->

क्या KO में सशर्त करने के लिए एक बेहतर / साफ-सुथरा तरीका है, या केवल पारंपरिक if-else के निर्माण का उपयोग करने से बेहतर दृष्टिकोण है?

इसके अलावा, मैं केवल यह बताना चाहूंगा कि इंटरनेट एक्सप्लोरर (IE 8/9) के कुछ संस्करण उपरोक्त उदाहरण को सही ढंग से पार्स नहीं करते हैं। अधिक जानकारी के लिए कृपया इस SO प्रश्न को देखें। त्वरित सारांश है, IE का समर्थन करने के लिए तालिका टैग के अंदर टिप्पणियों (आभासी बाइंडिंग) का उपयोग न करें। tbodyइसके बजाय का उपयोग करें :

<tbody data-bind="if: display"><tr><td>hello</td></tr></tbody>

Comments

इसे देखने वाला कोई भी व्यक्ति github.com/knockout/knockout/issues/962

— ब्रायन एम। हंट

Answer 1

कुछ अलग तरीके हैं जो आप इस प्रकार के कोड को संभाल सकते हैं।

• जैसे कि यदि आप अभी हैं तो if / ifnot संयोजन के साथ। यह ठीक काम करता है और बहुत क्रिया नहीं है।

• माइकल बेस्ट का स्विच / केस बाइंडिंग ( https://github.com/mbest/knockout-switch-case ) काफी लचीला है और आपको आसानी से और अधिक जटिल (सच्चे / झूठे से अधिक राज्यों) को संभालने में मदद कर सकता है।

• एक अन्य विकल्प गतिशील टेम्पलेट्स का उपयोग करना है। आप एक क्षेत्र को एक या अधिक टेम्प्लेट से बांधेंगे, जिसका उपयोग टेम्पलेट नाम के आधार पर किया जाएगा। यहाँ एक पोस्ट है जो मैंने कुछ समय पहले इस विषय पर लिखा था: http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html । आपके परिदृश्य में, ऐसा लग सकता है:

<td data-bind="template: $root.getCellTemplate"></td>

<script id="cellEditTmpl" type="text/html">
    <input type="text" name="email" data-bind="value: email" />
</script>

<script id="cellTmpl" type="text/html">
    <span data-bind="text: email"></span>
</script>

यह getCellTemplateफ़ंक्शन कहीं भी रह सकता है, लेकिन पहले तर्क के रूप में आइटम ($ डेटा) दिया जाएगा और उपयोग करने के लिए टेम्पलेट का नाम लौटाएगा।

Comments

अजीब है, मेरा HTML दिखाई नहीं देगा। इसके अलावा बस देखा कि माइकल बहुत ही एक ही जवाब दिया।

— आरपी नीमरियर

विकल्पों की एक व्यापक सूची के लिए धन्यवाद। मुझे लगता है कि मेरी मूल कोड शैली सरल मामलों के लिए काम करती है। आवश्यकता पड़ने पर मैं अन्य विकल्पों की जाँच करूँगा।

— जेन्सन चिंग

क्या टेम्पलेट को और भी अधिक कस्टमाइज़ करने का एक तरीका है, जैसे "टेम्पलेट: डेटा, प्रॉपर्टीनेम: 'ईमेल'" और टेम्पलेट डेटा-बाइंड = "टेक्स्ट: $ डेटा [प्रॉपर्टीनेम]" में।

— ओनूर टोपल

@OnurTOPAL - हाँ जब तक आपके पास एक चर है propertyName, आप गतिशील रूप से टेम्पलेट नाम निर्धारित कर सकते हैं।

— आरपी नीमरियर

Answer 2

एक दृष्टिकोण नामित टेम्प्लेट का उपयोग करना है (जो पास होने वाले तर्कों का समर्थन कर सकता है):

<!-- ko template: isEdit() ? 'emailEdit' : 'emailDisplay' --><!-- /ko -->
<script id="emailEdit" type="text/html">
    <td><input type="text" name="email" data-bind="value: email" /></td>
</script>
<script id="emailDisplay" type="text/html">
    <td data-bind="text: email"></td>
</script>

एक अन्य विकल्प मेरे स्विच / केस प्लगइन का उपयोग करना है, जो इस तरह काम करेगा:

<!-- ko switch -->
    <!-- ko case: isEdit -->
        <td><input type="text" name="email" data-bind="value: email" /></td>
    <!-- /ko -->
    <!-- ko case: $else -->
        <td data-bind="text: email"></td>
    <!-- /ko -->
<!-- /ko -->

Comments

धन्यवाद। आवश्यकता पड़ने पर मैं स्विच / केस प्लगइन को ध्यान में रखूँगा।

— जेन्सन चिंग

अच्छा प्लगइन तुम वहाँ मिल गया! यह सुनिश्चित करने के लिए एक का उपयोग करेगा।

— कुक्कस

नामांकित टेम्प्लेट बहुत अच्छा काम करते हैं, और यह समर्थन करता है कि कहीं और के लोग टर्निरीयर ऑपरेटर को घोंसले के द्वारा परिदृश्यों को टाइप करते हैं।

Answer 3

यदि /: ifnot के संयोजन का उपयोग करते समय नॉकआउट बाइंडिंग के पुनर्गणना से बचने के लिए: आप उन्हें 'के साथ' निर्माण के साथ संयोजन में उपयोग कर सकते हैं

    <!-- ko with: $data.DoSomePerformanceCriticalWork($data.SomeParameter()) -->
        <!-- ko if: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
        <!-- ko ifnot: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
    <!-- /ko -->

Answer 4

अब knockout-elseबाध्यकारी / प्लगइन भी है (जो मैंने इस मुद्दे को संबोधित करने के लिए लिखा था)।