छोरों और नियंत्रण बयानों के साथ जावास्क्रिप्ट में उन्नत स्ट्रिंग templating कैसे करना है

Question

मूल रूप से रन टाइम पर मैं

var colors = ['red', 'green', 'blue']; 

निम्नलिखित की तरह एक सरणी हो और मैं एक JSON स्ट्रिंग का निर्माण करने की जरूरत है निम्नलिखित की तरह

{ 
    "color" : { 
     "name" : "foo", 
     "properties" : { 
      ... 
     } 
    }, 
    "green" : { 
     "name" : "foo", 
     "properties" : { 
      ... 
     } 
    }, 
    "blue" : { 
     "name" : "foo", 
     "properties" : { 
      ... 
     } 
    } 
} 

वहाँ किसी भी स्ट्रिंग templating ढांचे की तरह

ऊपर

Answer 1

आप Nunjucks पैकेज का उपयोग कोशिश कर सकते हैं एक JSON स्ट्रिंग का निर्माण करने के छोरों और नियंत्रण बयान का समर्थन करता है है। यह दोनों जावास्क्रिप्ट & NPM पुस्तकालयों का समर्थन करता है। टेम्पलेट के रूप में पालन घोषित किया जा सकता (colors.template के रूप में यह नाम):

{ 
    {% for color in colors %} 
    "{{ color }}" : { 
     hashCode : "#CCC" 
    } 
    {% else %} 
    {% endfor %} 
} 

और इस प्रकार आप json टेम्पलेट पार्स कर सकते हैं:

var nunjucks = require('nunjucks'); 
nunjucks.configure({ autoescape: true }); 
var output = nunjucks.render('colors.template', {colors : ['red', 'green', 'blue'] }); 

Answer 2

Fit.UIs templating इंजन सरल और सहज है :

http://fitui.org/Core-Template.html

आप कर सकते हैं लोड एचटीएमएल दोनों एम्बेडेड और एक बाहरी HTML फ़ाइल से - उदाहरण:

var t = new Fit.Template(true); 
 

 
// Load embedded HTML 
 
tpl.LoadHtml(` 
 
    <h1>{[MyHeadline]}</h1><br> 
 
    <p>{[Description]}</p> 
 
    <ul> 
 
     <!-- LIST MyItems --> 
 
      <li>{[ItemTitle]}</li> 
 
     <!-- /LIST MyItems --> 
 
    </ul> 
 
`); 
 
// Load HTML from external HTML file 
 
t.LoadUrl("view.html", function(sender) 
 
{ 
 
    // Template is ready to be populated 
 
    t.Content.MyHeadline = "Welcome"; 
 
    t.Content.Description = "This is a test.."; 
 

 
    for (var i = 1 ; i <= 5 ; i++) 
 
    { 
 
     var item = t.Content.MyItems.AddItem(); 
 
     item.ItemTitle = "Item " + i; 
 
    } 
 

 
    t.Update(); 
 
}); 
 

 
t.Render(document.body);

जाहिर है आप को भरने के लिए आपके JSON ऑब्जेक्ट को स्वयं की आवश्यकता होगी, लेकिन वह काफी Fit.Template की चोटी पर प्राप्त करने के लिए आसान लगता है। सादा जावास्क्रिप्ट के साथ

https://www.npmjs.com/package/fit-ui

Answer 3

:

वहाँ एक NPM पैकेज उपलब्ध यहाँ अगर आप IntelliSense सक्षम करने के लिए Typings सहित चाहते है

function arrayToJSONProp(array, json) { 
    var strJson = JSON.stringify(json); 
    var output = "{"; 
    for(var i = 0; i < array.length; i++) { 
    var elem = array[i]; 
    output += '"' +elem +'" : ' +strJson +", "; 
    } 
    return JSON.parse(output.slice(0, -2) +"}"); 
} 

var colors = ["red", "green", "blue"]; // Colors array 
var prop = { // JSON obj input 
    "name" : "foo", 
    "properties" : { 
    "ran": "test" 
    } 
} 

console.log(arrayToJSONProp(colors, prop)); // Output of JSON obj 

http://jsfiddle.net/t6wka5x9/3/