Thymeleaf का उपयोग करके स्प्रिंग मॉडल से जावास्क्रिप्ट चर सेट करना

112

मैं Thymeleaf का उपयोग टेम्पलेट इंजन के रूप में कर रहा हूँ। मैं स्प्रिंग मॉडल से जावास्क्रिप्ट चर में चर कैसे पार कर सकता हूं?

वसंत-पक्ष:

@RequestMapping(value = "message", method = RequestMethod.GET)
public String messages(Model model) {
    model.addAttribute("message", "hello");
    return "index";
}

ग्राहक की ओर:

<script>
    ....
    var m = ${message}; // not working
    alert(m);
    ...
</script>

javascript spring thymeleaf

— Matteo
स्रोत

191

आधिकारिक दस्तावेज के अनुसार :

<script th:inline="javascript">
/*<![CDATA[*/

    var message = /*[[${message}]]*/ 'default';
    console.log(message);

/*]]>*/
</script>

— vdenotaris
स्रोत

1

काम नहीं करता है ... जावास्क्रिप्ट त्रुटि

— अनियोजित

6

ठीक काम करता है, संदेश से भी पढ़ना संभव है। समर्थक: var msg = [[# {msg}]];

— एंड्री

2

@ szxnyc यदि आप /*<![CDATA[*/मैक्रो को भूल जाते हैं तो आपको वह मिल जाएगा।

— कोडमोनकी

8

इस पर भी ध्यान दें<script th:inline="javascript">

— ग्रिगोरी किसलिन

1

@ माइकेलसोचमाल आप इनलाइन जावास्क्रिप्ट को बाहरी जावास्क्रिप्ट पर लोड कर सकते हैं और बाहरी जावास्क्रिप्ट में एक ही चर (इनलाइन जावास्क्रिप्ट को परिभाषित) का उपयोग कर सकते हैं।

— अल्फाज़ जिकानी

20

var message =/*[[${message}]]*/ 'defaultanyvalue';

— user5518390
स्रोत

6

ध्यान दें कि यह / * * और निहित [[]] के बीच कोई स्थान नहीं होना चाहिए।

— जुए

1

यह ध्यान देने योग्य है कि defaultanyvalueपृष्ठ को वैधानिक रूप से चलाने के दौरान ही इसका उपयोग किया जाएगा, अर्थात वेब कंटेनर के बाहर। यदि एक कंटेनर के अंदर भाग गया और चर messageको परिणामी स्रोत कोड घोषित नहीं किया गया है तोvar message = null;

— फेलिप लेओ

3

th:inline="javascript"स्क्रिप्ट टैग में जोड़ने के लिए भी महत्वपूर्ण है ।

— redent84

15

थाइमेलफ 3 अब:

एक स्थिरांक प्रदर्शित करें:

<स्क्रिप्ट वें: इनलाइन = "जावास्क्रिप्ट">
var MY_URL = /* [।] http://$$T(com.xyz.constants।
</ Script>

एक चर प्रदर्शित करें:
```
var संदेश = [[$ {संदेश}]];
```
या जब आप अपनी टेम्पलेट फ़ाइल को स्थिर तरीके से (बिना किसी सर्वर पर निष्पादित किए) खोलते हैं, तो एक मान्य जावास्क्रिप्ट कोड रखने के लिए टिप्पणी में।

Thymeleaf इसे कहते हैं: जावास्क्रिप्ट प्राकृतिक टेम्पलेट
```
var message = / * [[$ {message}]] * / "";
```
थिमेलेफ़ ने टिप्पणी के बाद और अर्धविराम से पहले हमारे द्वारा लिखी गई सभी चीजों को अनदेखा कर दिया।

अधिक जानकारी: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

— redochka
स्रोत

धन्यवाद! wanna ने आपको एक बियर दी, जिसे मैं इस सिंटैक्स var MY_URL = /* के लिए देख रहा था।

— आंग

12

प्रलेखन के अनुसार इनलाइनिंग करने के कई तरीके हैं।
स्थिति के आधार पर आपको सही रास्ता चुनना होगा।

1) बस सर्वर से जावास्क्रिप्ट के लिए चर डाल:

<script th:inline="javascript">
/*<![CDATA[*/

var message = [[${message}]];
alert(message);

/*]]>*/
</script>

2) सर्वर साइड चर के साथ जावास्क्रिप्ट चर का मिश्रण, उदाहरण के लिए आपको जावास्क्रिप्ट के अंदर अनुरोध करने के लिए लिंक बनाने की आवश्यकता है

<script th:inline="javascript">
        /*<![CDATA[*/
        function sampleGetByJquery(v) {
            /*[+
            var url = [[@{/my/get/url(var1=${#httpServletRequest.getParameter('var1')})}]] 
                      + "&var2="+v;
             +]*/
            $("#myPanel").load(url, function() {});
        }
        /*]]>*/
        </script>

एक स्थिति जिसे मैं हल नहीं कर सकता - तब मुझे जावा विधि के अंदर जावास्क्रिप्ट चर को टेम्पलेट के अंदर कॉल करने की आवश्यकता है (यह असंभव है मुझे लगता है)।

— sanluck
स्रोत

9

सुनिश्चित करें कि आपके पास पहले ही पृष्ठ पर थाइमलीफ़ है

//Use this in java
@Controller
@RequestMapping("/showingTymleafTextInJavaScript")
public String thankYou(Model model){
 model.addAttribute("showTextFromJavaController","dummy text");
 return "showingTymleafTextInJavaScript";
}


//thymleaf page  javascript page
<script>
var showtext = "[[${showTextFromJavaController}]]";
console.log(showtext);
</script>

— नीतीश कनाडे
स्रोत

6

मैंने इस तरह के काम को जंगली में देखा है:

<input type="button"  th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />

— noumenon
स्रोत