नॉकआउट के लिए लाइनक-जैसे सिंटैक्स

हमारी टीम को MVVM पैटर्न और विशेष रूप से नॉकआउट रूपरेखा का उपयोग करके वेब पोर्टल विकसित किए एक साल बीत चुका है। थोड़ा-थोड़ा करके, अनुभव जमा हो रहा था, विभिन्न समाधान दिखाई दिए, अच्छे और बुरे व्यवहार, और अब, इसलिए बोलने के लिए, यह परिपक्व था। Linq.js लाइब्रेरी पहले से ही lin वाक्य रचना के लिए जावास्क्रिप्ट के लिए मौजूद है, और एक लंबे समय के लिए हम सोच रहे थे कि क्या इसे हमारी परियोजना में खींच लिया जाए। और यहां तक ​​कि उपयोग के उदाहरण, इंटरनेट पर नॉकआउट के साथ मिलकर।

विचार यह है कि मुझे लगा कि लाइनक विधियों के अंदर एक संगोष्ठी बनाने के लिए है।

तुलना के लिए, फिडल से कोड:

this.filteredItems = ko.computed(function() { var term = this.searchTerm(); return this.items.where(function(item) { return item.name.indexOf(term) > -1; }); }, this);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और कोड जो मैं इसके बजाय लिखना चाहूंगा:

  this.filteredItems = this.items .Where(function(item) { return item.name.indexOf(this.searchTerm()) > -1; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

उपर्युक्त गणना किए गए एनकैप्सुलेशन के बाद, यह निकला कि linq.js लाइब्रेरी की वास्तव में आवश्यकता नहीं है। नॉकआउट में निर्मित पर्याप्त उपकरण। इसके अलावा, उन्हें केवल एक बार लिखने की आवश्यकता है, और बाहर कोई अंतर नहीं होगा, भले ही यह लूप के लिए सबसे सीधा और सरल हो।



तो, पहले हम विधियों के साथ एक वस्तु तैयार करते हैं:

 var methods = { First: function(predicate) { return ko.computed(function() { return ko.utils.arrayFirst(this(), predicate); }, this, { deferEvaluation: true }); }, Select: function(func) { return ko.computed(function() { return ko.utils.arrayMap(this(), function(item) { return ko.utils.unwrapObservable(func(item)); }); }, this, { deferEvaluation: true }); }, SelectMany: function(func) { return ko.computed(function() { var result = []; ko.utils.arrayForEach(this(), function(item) { result = result.concat(ko.utils.unwrapObservable(func(item))); }); return result; }, this, { deferEvaluation: true }); }, Where: function(predicate) { return ko.computed(function() { return ko.utils.arrayFilter(this(), predicate); }, this, { deferEvaluation: true }); }, Distinct: function(func) { if (!func) { return this.DistinctValue(); } return ko.computed(function() { var obj = {}; return ko.utils.arrayFilter(this(), function(item) { var val = ko.utils.unwrapObservable(func(item)); return obj[val] ? false : (obj[val] = true); }); }, this, { deferEvaluation: true }); }, DistinctValue: function() { return ko.computed(function() { var obj = {}; return ko.utils.arrayFilter(this(), function(val) { return obj[val] ? false : (obj[val] = true); }); }, this, { deferEvaluation: true }); }, Sum: function(func) { return func ? this.Select(func).Sum() : this.SumValue(); }, SumValue: function() { return ko.computed(function() { var result = 0; ko.utils.arrayForEach(this(), function(item) { result = result + (+item); }); return result; }, this, { deferEvaluation: true }); }, StringJoin: function(joinString) { joinString = joinString || ', '; return ko.computed(function() { return this().join(joinString); }, this, { deferEvaluation: true }); }, };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

दूसरी क्रिया जो हम अवलोकनीय और गणना की गई है, उस पर हुक करते हैं:

  for (var i in methods) { ko.observableArray.fn[i] = methods[i]; ko.computed.fn[i] = methods[i]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

पकवान तैयार है, इसका उपयोग करें। उदाहरण:

  self.DistinctEntities = policy.Coverages .SelectMany(function(item) { return item.Entities; }) .Distinct(function(item) { return item.Name; }); self.EmployeeCount = policy.CoveredTotalCurrentYear .Sum(function (item) { return item.Quantity; }); self.LineOfCoverageColumnName = policy.Coverages .Select(function (item) { return item.LineOfCoverage.ShortDisplayName; }) .StringJoin();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और शुरुआत के लिए, मानचित्र विधि, चयन विधि के समान, लेकिन जटिल / महंगा संचालन के लिए, विशेष रूप से, जब इनपुट सरणी में प्रत्येक डेटा मॉडल के लिए आपको आउटपुट में एक दृश्य मॉडल बनाने की आवश्यकता होती है। इनपुट सरणी में एक तत्व जोड़ते समय, चयन ऑपरेशन सरणी के सभी तत्वों के लिए "लैम्ब्डा" को फिर से कॉल करेगा, मैप ऑपरेशन केवल नए जोड़े गए तत्व के लिए ऐसा करेगा:

 Map: function (converter) { var oldValues = []; var oldResults = []; return ko.computed(function() { var values = this().slice(); var results = []; ko.utils.arrayForEach(values, function(item) { var index = oldValues.indexOf(item); results.push(index > -1 ? oldResults[index] : converter(item)); }); oldValues = values; oldResults = results; return results; }, this, { deferEvaluation: true }); },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

का उपयोग करें:

 self.Coverages = policy.Coverages.Map(function(coverage) { return new coverageViewModel(coverage); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

PS तरीकों की सूची अभी तक LinQ के पूरे सेट को कवर नहीं करती है, लेकिन इसका विस्तार करना मुश्किल नहीं है।