Mustache.js: पैरेंट स्कोप एक्सेस करना

को निर्मित 11 दिस॰ 2014 · 18टिप्पणियाँ · स्रोत: janl/mustache.js

पैरेंट स्कोप एक्सेस करना

मानते हुए :

node = {
  id: 1,
  children : [
      { id : 2 },
      { id : 3 }
  ]
}

और निम्नलिखित टेम्पलेट:

{{ id }} {# will output node.id #}
{{#children}}
    {{children.id}}  {# will output node.children[i].id #}
    {{id}}  {# will also output node.children[i].id #}
{{/children}}

वैसे भी, आपको कभी-कभी मूल संपत्ति (उदाहरण के लिए नेस्टेड नोड मॉडल में) तक पहुंचना पड़ता है।
इसे आसानी से लागू किया जा सकता है जैसे माता-पिता का दायरा प्राप्त करने के लिए "../" का उपयोग करना

भूतपूर्व :

{{ id }} {# will output node.id #}
{{#children}}
    {{children.id}}  {# will output node.children[i].id #}
    {{id}}  {# will also output node.children[i].id #}
    {{ ../id }}  {# will output node.id #}
{{/children}}

इसे हासिल करने के लिए:

  Context.prototype.lookup = function (name) {
    var cache = this.cache;

    var value;
    if (name in cache) {
      console.log(name + ' found');
      value = cache[name];
    } else {
      var context = this, names, index;

      while (context) {
        if (name.indexOf('.') > 0) {
          value = context.view;
          names = name.split('.');
          index = 0;

          while (value != null && index < names.length)
            value = value[names[index++]];
        } else if(name.match(/^\.\.\//)) {
          name = name.replace(/^\.\.\//, '');
        } else {
          value = context.view[name];
        }

        if (value != null)
          break;

        context = context.parent;
      }

      cache[name] = value;
    }

    if (isFunction(value))
      value = value.call(this.view);

    return value;
  };

Future Plugin

स्रोत

SmasherHell

👍10 🎉4

सबसे उपयोगी टिप्पणी

सही। मैं हैंडलबार्स के बारे में पूरी तरह से भूल गया।

उपयोगकर्ताओं को हैंडलबार में खो दें।
यह एक स्वीकार्य डिजाइन निर्णय है।

osher 27 सित॰ 2016

👍8 😕5

सभी 18 टिप्पणियाँ

यह mustache के विनिर्देशों में नहीं है, है ना? इसका कोई उपाय नहीं है? मुझे आश्चर्य है कि इससे पहले कोई भी इस सीमा से नहीं टकराया था।

dasilvacontin 15 दिस॰ 2014

👍5

मैं सहमत हूं कि अक्सर माता-पिता के दायरे में चीजों तक पहुंचने की आवश्यकता होती है। मेरा व्यावहारिक दृष्टिकोण हमेशा अस्पष्ट संपत्ति के नामों से बचने का रहा है। इसने मेरे लिए लंबे समय तक काम किया है, हालांकि इसका परिणाम अक्सर अजीब वस्तुओं में होता है।

दूसरी ओर, हैंडलबार के साथ अनुभव की बात करें; इस क्षमता के होने से लोग पागल पेचीदा पैरेंट स्कोप रिज़ॉल्यूशन बनाने वाले लोगों को लुभा सकते हैं: {{../../../id}} को {{movieId}} तुलना में समझना बहुत कठिन है।

phillipj 15 दिस॰ 2014

यह सच है कि "../" का उपयोग करने से अपठनीयता हो सकती है। लेकिन दूसरी तरफ माता-पिता को हल करने के लिए कैमल का उपयोग नहीं किया जा सकता क्योंकि आपके पास स्थानीय दायरे में कैमल हो सकता है। इसके अलावा, माता-पिता तक पहुंचने के लिए किसी कीवर्ड को परिभाषित करना मेरे विचार से मूंछ दर्शन का सम्मान नहीं करेगा।

स्पष्ट रूप से बोलते हुए मैं निर्देशिका प्रतिनिधित्व का उपयोग करने से सरल और बेहतर विचार नहीं कर सका।

SmasherHell 16 दिस॰ 2014

👍1

हाँ, अस्पष्ट संपत्ति के नामों से बचने से भी अधिक पठनीय/वर्बोज़ टेम्प्लेट बनते हैं। लेकिन मैं समझता हूं कि कुछ लोग इस सुविधा को क्यों पसंद करेंगे।

एक अलग पैकेज लिखने के बारे में क्या है जो वांछित सुविधा जोड़ने के लिए mustache.js के आंतरिक कामकाज को संशोधित करता है? एक प्लगइन की तरह।

dasilvacontin 17 दिस॰ 2014

ईमानदार होने के लिए, मैं वास्तव में ऐसा तब तक नहीं देखता जब तक कि प्लगइन, या प्रज्ञा के माध्यम से न हो। और एक प्लगइन एपीआई अभी प्राथमिकता प्रतीत नहीं होता है।

dasilvacontin 20 दिस॰ 2014

मैं इसके बारे में थोड़ा और सोच रहा हूं ...

मेरा मानना है कि मूंछ का दर्शन डेटा _as-is_ में रेंडरर को पास नहीं करना है, बल्कि इसे पहले से एक दृश्य में 'तैयार' करना है। फिर आपके पास अपने नोड्स में parentId संपत्ति होगी।

अधिक वर्बोज़ चर वाले टेम्प्लेट को पढ़ना और बनाए रखना भी आसान है:

{{ id }}
{{#children}}
    {{children.id}}
    {{id}}
{{/children}}

पहले बनाम बाद

{{ nodeId }}
{{#children}}
    {{ nodeId }}
    {{ parentId }}
{{/children}}

प्रासंगिक: http://stackoverflow.com/questions/4067093/mustache-read-variables-from-parent-section-in-child-section

(आपको @bobthecow को बुलाने के लिए खेद है, लेकिन मैं हमेशा आपकी मूंछों के ज्ञान की सराहना करता हूं: मुस्कान :)

dasilvacontin 19 अग॰ 2015

👎6

आप पहले से ही ऊपर जा सकते हैं, इसलिए सभी को पहले टेम्प्लेट के साथ दिखाई गई समस्या को ठीक करने के लिए डेटा को एक अस्थायी वस्तु {node: ... } साथ लपेटना है, टेम्पलेट को {{#node}}...{{/node}} लपेटना है और फिर {{node.id}} भाग काम कर सकता है। आपको मौजूदा डेटा को इस तरह से बदलने (और नहीं करने) की आवश्यकता नहीं है, और आप उन दोनों "JIT" को जोड़ सकते हैं जैसे आप to_html() टेम्पलेट...

rndme 17 नव॰ 2015

👍1

एक पैची वर्कअराउंड की तरह लगता है। यह केवल साधारण 2-स्तरीय मॉडल के साथ भी काम करता है जहां आप बाहरी परत के लिए एक लिफाफा लपेटकर हल कर सकते हैं। लेकिन क्या होगा अगर मॉडल गहरा है? जो बाजीगरी लगता है।

अक्सर मुझे एक मॉडल को बांधने की आवश्यकता होती है जो मुझे निचली डेटा परतों से मिलता है, और मेरा काम इसे प्रस्तुत करना है - मुझे इसे इंफ्रा से किसी भी रूप में मिला है। यहां प्रस्ताव यह है कि मुझे मॉडल को पुनरावर्ती रूप से सभी तरह से एक प्रस्तुत करने योग्य स्थिति में बदलना होगा - यहां क्या माना जाएगा redable property names ।
यह वास्तविकता को आसानी से पूरा नहीं करता है ...
हाँ, सच है, यह टेम्पलेट को मॉडल के साथ जोड़ता है। लेकिन क्या आप मुझे एक टेम्पलेट दिखा सकते हैं जो एक ठोस मॉडल नियमों के साथ नहीं है? सभी टेम्प्लेट एक परिभाषित मॉडल को प्रस्तुत करने के लिए बनाई गई परिभाषा के अनुसार हैं।
एक और परत परिभाषा की परत को एक कदम पीछे ले जाती है, और एक अनुवाद परत की आवश्यकता होती है - जो कठिन है और हमेशा आवश्यक नहीं है

आईएमएचओ, मुझे लगता है कि उपकरण को रायशुदा नियम थोपने के बजाय उपयोगकर्ता पर चुनाव छोड़ देना चाहिए

osher 26 सित॰ 2016

👍1

पाठकों के लिए, @rndme जो सुझाव दे रहा है उसका उदाहरण:

const Mustache = require('mustache')

var view = {
  node: {
    id: 5,
    children: [ { id: 6 }, { id: 7 } ]
  }
}

const template = `
{{#node}}
  children:
  {{#children}}

    id: {{ id }}
    parentId: {{ node.id }}
  {{/children}}
{{/node}}
`

const output = Mustache.render(template, view)
console.log(output)

  children:

    id: 6
    parentId: 5

    id: 7
    parentId: 5

निम्नलिखित टेम्पलेट का उपयोग करना latest रूप में काम नहीं करता है , लेकिन _it को काम करना चाहिए_, imo.

const template = `
  children:
  {{#node.children}}

    id: {{ id }}
    parentId: {{ node.id }}
  {{/node.children}}
`

dasilvacontin 26 सित॰ 2016

👍1

हाँ, सच है, यह टेम्पलेट को मॉडल के साथ जोड़ता है। लेकिन क्या आप मुझे एक टेम्पलेट दिखा सकते हैं जो एक ठोस मॉडल नियमों के साथ नहीं है? सभी टेम्प्लेट एक परिभाषित मॉडल को प्रस्तुत करने के लिए बनाई गई परिभाषा के अनुसार हैं।
एक और परत परिभाषा की परत को एक कदम पीछे ले जाती है और एक अनुवाद परत की आवश्यकता होती है - जो थकाऊ होती है और हमेशा आवश्यक नहीं होती है

अफैक, मूंछ का दर्शन हमेशा यह रहा है कि आप एक ऐसा दृश्य उत्पन्न करते हैं जो टेम्पलेट को दिया जाता है - आप सीधे मॉडल को पास नहीं करते हैं।

@osher क्या आप हमें एक उदाहरण दिखा सकते हैं कि आप ऊपर बताए गए टिप/ट्रिक के साथ आसानी से काम नहीं कर सकते हैं?

dasilvacontin 26 सित॰ 2016

मैं बाद में स्निपेट प्रदान करने का प्रयास करूंगा, लेकिन मूल रूप से - 3 स्तरों नेस्टिंग के साथ यह काम नहीं करेगा क्योंकि आप मध्य-स्तर को लपेट नहीं सकते हैं - आपको स्रोत को संसाधित दृश्य में स्थानांतरित करना होगा।
आप लिपटे हुए शीर्ष-स्तर तक पहुँचने में सक्षम होंगे, लेकिन आपके पास मध्य स्तर के लिए कोई समाधान नहीं है।

उदाहरण के लिए एक स्वैगर दस्तावेज़ लें, जहां आपके पास रूट स्तर, पथ स्तर, क्रिया स्तर है (और और भी है लेकिन यहां रुकें)। प्रत्येक स्तर एक कस्टम निर्देश निर्दिष्ट कर सकता है - x-uses , जो कार्यान्वयन परत के लिए एक DI निर्देश है।

मान लीजिए कि आप इस स्वैगर दस्तावेज़ से HTML दस्तावेज़ बनाना चाहते हैं।
आपको प्रत्येक ऑपरेशन हैंडलर (क्रिया स्तर) के लिए निर्दिष्ट करने वाली एक फ्लैट तालिका की आवश्यकता होती है, जिसे वह स्वीकार करता है, और किस परत से इसे प्राप्त करता है।
जबकि सारी जानकारी स्वैगर दस्तावेज़ में निहित है - अब आपको एक समस्या है।

अगला।
उस कोड को उत्पन्न करने के लिए मूंछों का उपयोग करने का प्रयास करें जो दस्तावेज़ में वर्णित एपीआई को लागू करता है जो ऑपरेशन डिफ़ॉल्ट प्रतिक्रिया के आधार पर नकली प्रतिक्रिया देता है।
ऐसे डॉकलेट बनाने का प्रयास करें जो यह वर्णन करें कि वास्तविक तर्क के साथ नकली प्रतिक्रिया को बदलने के लिए आने वाले कार्यान्वयन डेवलपर को अपने DI संदर्भ में क्या उम्मीद करनी चाहिए और इस बारे में विशिष्ट होना चाहिए कि वे इसे किस स्तर पर प्राप्त करते हैं।
वैसा ही...

शास्त्रीय HTML पीढ़ी नहीं - हाँ। लेकिन किसने कहा कि मूंछें केवल HTML के लिए हैं? यह एक टेम्प्लेटिंग इंजन है, और कोड जनरेशन आमतौर पर ऐसे टेम्प्लेट इंजनों का उपयोग करके लागू किया जाता है;)

आप सीधे मॉडल पास नहीं करते हैं।

यह उपयोगकर्ता की पसंद होनी चाहिए, सीमा/प्रतिबंध नहीं

osher 26 सित॰ 2016

मैं आपको एक और उदाहरण दूंगा, और मैं गुप्त सॉस को धोखा दिए बिना इसे करने की कोशिश करूंगा।

एक रणनीति खेल में एक खिलाड़ी के स्वामित्व वाली संपत्ति का वर्णन करने वाला एक ट्री डेटा-संरचना मान लें।
पेड़ लगभग 5 स्तरों तक जा सकता है, उदाहरण के लिए:
Aliance -> Empire -> City -> Army -> Troops

प्रत्येक स्तर संशोधक बोनस प्रदान कर सकता है - उदाहरण के लिए - या हमला बोनस, रक्षा बोनस, स्वास्थ्य बोनस, आदि।
समान आँकड़ों को संबोधित करने वाले संशोधक सभी स्तरों में समान नाम से वर्णित होते हैं, (मुख्यतः क्योंकि उनकी गणना पुनरावर्ती रूप से की जाती है)।
आपको एक युद्ध-सिम्युलेटर प्रस्तुत करने के लिए टेम्पलेट इंजन का उपयोग करने की आवश्यकता है जो सेना में सैनिकों के युद्ध-आंकड़ों को प्रदर्शित करके खिलाड़ियों को यह चुनने में मदद करनी चाहिए कि सेना में सैनिकों के युद्ध-आंकड़े प्रदर्शित करके कौन सी सेना आदर्श सेना है, लेकिन लड़ाई एकत्र करें संशोधक जिन्हें पूरे पेड़ में समान विशेषता नाम से नामित किया गया है।
यह _वेरी_ सरलीकृत है, लेकिन एक सच्ची कहानी पर आधारित है जहां अन्य टूल ने बड़ी आसानी से समस्या को हल किया, बिना किसी मध्य अनुवाद परत की आवश्यकता के।

मैं कठिनाई जोड़ूंगा: कभी-कभी सेनाएं गठबंधन-स्तरीय टास्क फोर्स में आवंटित की जाती हैं।
Alliance -> Rally -> Troops
उपकरण पर्याप्त सामान्य (सादा पुनरावर्ती) होना चाहिए और ठोस स्तरों पर निर्भर नहीं होना चाहिए।

मैंने इसे हल किया कि कौन सी मूंछें आंशिक रूप से कॉल करेंगी, केवल यह कि मैंने मूंछों का उपयोग नहीं किया ...

osher 26 सित॰ 2016

@ ओशर ने कहा:

यह उपयोगकर्ता की पसंद होनी चाहिए, सीमा/प्रतिबंध नहीं

इसमें कोई शक नहीं कि मूंछों की राय होती है। यह "तर्क कम टेम्पलेट्स" दर्शन टेम्पलेट्स पर बहुत सारे प्रतिबंध लगाता है, इस तथ्य को प्रतिपादन के लिए टेम्पलेट को देने से पहले अक्सर डेटा/मॉडल तैयार करने की आवश्यकता होती है। यदि यह आपकी आवश्यकताओं के अनुरूप नहीं है, तो ऐसे विकल्प हैं जो बेहतर हो सकते हैं, जैसे कि हैंडलबार या यहां तक कि लॉश। बस कुछ का नाम लेने के लिए

phillipj 27 सित॰ 2016

सही। मैं हैंडलबार्स के बारे में पूरी तरह से भूल गया।

उपयोगकर्ताओं को हैंडलबार में खो दें।
यह एक स्वीकार्य डिजाइन निर्णय है।

osher 27 सित॰ 2016

👍8 😕5

मुझे पूरा यकीन है कि @osher व्यंग्यात्मक हो रहा था जब उसने कहा "यह एक स्वीकार्य डिजाइन निर्णय है।", लेकिन इस विषय को 2016 से छोड़ दिया गया है। क्या चल रहा है? ऐसा लगता है कि इस जावास्क्रिप्ट भंडार के साथ-साथ मुख्य भंडार में इस प्रश्न से बचा जा रहा है:
https://github.com/mustache/mustache.github.com/issues/103

मैं एक के लिए सोचता हूं कि माता-पिता के दायरे को संदर्भित करने में सक्षम होना तर्क-रहित है और मूंछों के आदर्शों में हस्तक्षेप नहीं करना चाहिए।

मुझे हमेशा एक प्रमुख "../" जैसे प्रतीक के साथ रूट स्कोप तक पहुंचने में सक्षम होने का विचार पसंद है:

Mustache.render('{{a1}}{{#a}}{{b.c}}{{../a1}}{{/a}}',{"a":{"b":{"c":"x1"}},"a1":"x2"})
"x2x1"

मैं चाहता हूं कि यह "x2x1x2" प्रस्तुत करे लेकिन यह आखिरी को छोड़ देता है क्योंकि यह नहीं है कि यह कैसे काम करता है।
मैंने सोचा कि मैं JSONPath: https://goessner.net/articles/JsonPath/index.html#e2 जैसे कुछ का उपयोग करने की अनुशंसा करता हूं, हालांकि एक्सएमएल के लिए XPath के विपरीत, यह पैरेंट ऑपरेटर की अनुशंसा/कार्यान्वयन नहीं करता है, जो कि मैं उम्मीद कर रहा था के लिये।

शायद मूंछें केवल हैंडलबार के साथ संगत रहने की कोशिश कर सकती हैं और मूल संदर्भ के लिए ../ सिंटैक्स का उपयोग कर सकती हैं?

adjenks 29 नव॰ 2018

👍1

AFAIK, हैंडलबार केवल JS है, जबकि मूंछें कई वातावरणों में समान सिंटैक्स का उपयोग करती हैं, उदाहरण के लिए PHP। यदि आप मूंछों के सिंटैक्स को बदलना चाहते हैं, तो आपको अन्य सभी गैर-जेएस कार्यान्वयनों को भी ऐसा करने के लिए मनाना होगा; बड़ा आदेश। इसके अलावा, जेएस कोड को संशोधित करने में, मुझे "एक स्तर" तक जाने में समस्या हुई, हालांकि मैंने अपने कांटा में रूट पर वापस जाने का एक तरीका जोड़ा, जो लागू करने के लिए बहुत

rndme 3 दिस॰ 2018

इस पर कुछ?

NeliHarbuzava 7 फ़र॰ 2020

👀5 👍4

उन स्थितियों के लिए दस्तावेज़ीकरण और शैली अनुशंसा की भी आवश्यकता है जहां डॉट नोटेशन वैकल्पिक है।

view = { wrap: { txt: "test" } };

{{#wrap}}
  {{wrap.txt}} {{! Should I use this?}}
  {{txt}} {{! Or this?}}
{{/wrap}}

अधिक विवरण यहाँ: https://stackoverflow.com/q/62166467/5637701

cyqsimon 3 जून 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Mustache.js: पैरेंट स्कोप एक्सेस करना

सबसे उपयोगी टिप्पणी

सभी 18 टिप्पणियाँ

संबंधित मुद्दों