knockout.js
JSON के साथ नॉकआउट फोरच बाइंडिंग के साथ काम करना

नेस्टेड लूपिंग के साथ काम करना

यहाँ JSON संरचना है जिसका हम उपयोग करने जा रहे हैं।

{
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "skills": [
        {
          "name": "javascript",
          "rating": 5
        }
      ]
    },
    {
      "firstName": "Anna",
      "lastName": "Smith",
      "skills": [
        {
          "name": "css",
          "rating": 5
        },
        {
          "name": "javascript",
          "rating": 5
        }
      ]
    },
    {
      "firstName": "Peter",
      "lastName": "Jones",
      "skills": [
        {
          "name": "html",
          "rating": 5
        },
        {
          "name": "javascript",
          "rating": 3
        }
      ]
    }
  ]
};

इस जसन संरचना को एक चर में सौंपा जा सकता है या यह किसी भी एपीआई की प्रतिक्रिया हो सकती है।

जैसा कि हम इस JSON में देख सकते हैं कि एक बाहरी नोड कर्मचारी है जो उनके बारे में जानकारी रखता है, और एक आंतरिक नोड है जो प्रत्येक कर्मचारी कौशल के बारे में बताता है।

इसलिए यहाँ हम नॉकआउट फ़ॉरचेक का उपयोग करके प्रत्येक के लिए नेस्टेड बनाने जा रहे हैं। यहाँ html है

<ul id="employee" data-bind="foreach: employee">
   <li data-bind="text:firstName + ' ' + lastName">
   </li>
   <ul data-bind="foreach : skills">
        <li data-bind="text: name">
        </li>
      <ul>
        <li>
          Rating : <!-- ko text: rating --><!-- /ko -->
        </li>
      </ul>
   </ul>
</ul>

यहाँ ऊपर html में दो सूची है जो foreach loop पकड़ती है। बाहरी लूप जसन संरचना के बाहरी नोड को रखेगा जो कर्मचारी है। इनर लूप प्रत्येक कर्मचारी के कौशल को धारण करता है। प्रत्येक लूप के अंदर हम संबंधित नोड के गुणों तक पहुंच सकते हैं। एक उदाहरण के लिए हम स्किल लूप के अंदर नाम और रेटिंग का उपयोग कर सकते हैं, न कि बाहर से।

नीचे जावास्क्रिप्ट कोड है।

var employeeViewModel = function(){
  var self = this;
  self.employee = ko.observableArray(employees);//here we can assign json
}
var viewModel = new employeeViewModel();
ko.applyBindings(viewModel);

जावास्क्रिप्ट बिंदु को देखने के लिए बहुत अधिक कोड नहीं है। हम सीधे अपने json को वेधशाला के रूप में निर्दिष्ट कर सकते हैं जिसका उपयोग Html द्वारा किया जाएगा।