knockoutJS

Question

में देखे जाने योग्य आरे से स्वयं को हटाने से मैं डिवीजनों का वृक्षारोपण बनाने के लिए नॉकआउटज का उपयोग कर रहा हूं। प्रत्येक नोड के बगल में तीन बटन होंगे: 1) नया बच्चा (नोड पर लागू होता है जो 2 के बगल में है) निकालें (यह नोड को इसके आगे ले जाता है, और 3) कॉपी, जो नोड और उसके सभी बच्चों की प्रतिलिपि बनाता है और एक नया बनाता है माता पिता के नीचे नोड।

मुझे नया बटन नीचे मिला है, और अब मैं हटाए गए बटन पर काम कर रहा हूं। मुझे यह काम करने के लिए प्रतीत नहीं होता है, और कुछ भी उपयोगी करने के बजाय यह पूरे पृष्ठ को रीफ्रेश करता है। कोड यह रहा:

दृश्य:

<h2>Skill & Weight Divisions</h2> 
     <span data-bind="text: tournamentname"></span><button data-bind="click: addDivision"><img src="new.png"/></button> 
     <ul data-bind="template: { name: 'divisionTemplate', foreach: divisions }"></ul> 

टेम्पलेट:

<script id="divisionTemplate" type="text/html"> 
    <li data-bind="style: {'background-color':color}"> 
     <input data-bind="value: name"/><button data-bind="click: addDivision"><img src="new.png"/></button><button data-bind="click: $parent.removeDivision"><img src="remove.png"/></button><button data-bind="click: $parent.copyDivision"><img src="copy.png"/></button> 
     <ul data-bind="template: { 'if': children, name: 'divisionTemplate', foreach: children }"></ul> 
    </li>  
</script> 

देखें मॉडल और उचित सहायक समारोह:

function division(id, name, filter, children) { 
     this.id = ko.observable(id); 
     this.name = ko.observable(name); 
     this.filter = ko.observable(filter) 
     if(children){ 
      this.children = ko.observableArray(children); 
     }else{ 
      this.children = ko.observableArray(); 
     } 
     this.addDivision = function(){ 
      this.children.push(new division("", "", "")); 
     } 
     this.removeDivision = function(division){ 
      this.children.remove(division); 
     } 
     this.copyDivision = function(division){ 
      this.children.push(division); 
     } 
     this.color = randColor(); 
    }; 
    function tournamentViewModel(){ 
     var self= this; 
     self.tournamentname = ko.observable('NO NAME YET'); 
     self.districts = ko.observableArray([new district('Provo',1),new district('Salt Lake City',2),new district('St. George',3)]); 
     self.district = ko.observable(self.districts()[0]); 
     self.regions = ko.observableArray([new region('Utah',1),new region('Idaho',2)]); 
     self.region = ko.observable(self.regions()[0]); 
     self.location = ko.observable('WHEREVER YOU WANT'); 
     self.eventdate = ko.observable(''); 
     self.startTime = ko.observable(''); 
     self.image = ko.observable(); 
     self.flyer = ko.computed(function(){ 
      var flyerHTML = '<span style="text-align:center;padding:10px;"><h1>'+self.tournamentname()+'</h1><img src="'+self.image()+'"/><br/>'; 
      flyerHTML += 'District: ' + self.district().districtName + ' Region: ' + self.region().regionName+'<br><br>'; 
      flyerHTML += '<h2>WHEN: '+self.eventdate()+' '+self.startTime()+'</h2>'; 
      flyerHTML += '<h2>WHERE: '+self.location()+'</h2>'; 
      flyerHTML += '<img src="http://maps.googleapis.com/maps/api/staticmap?center='+encodeURI(self.location())+'&zoom=12&size=200x200&markers=color:blue%7Clabel:S%7C'+encodeURI(self.location())+'&maptype=roadmap&sensor=false"/>'; 
      return flyerHTML; 
     }, self); 
     self.clearImage = function(){ 
      self.image(''); 
     } 
     self.tournamentID = ko.computed(function(){return 't_'+self.district()+'_'+self.region()+'_'+self.eventdate()}, self); 
     self.pricingStructures = ko.observableArray([new pricingStructure(3,2.99), new pricingStructure(1,1.99)]); 
     self.removePricingStructure = function(pricingStructure){ 
      self.pricingStructures.remove(pricingStructure); 
     } 
     self.addPricingStructure = function(){ 
      self.pricingStructures.push(new pricingStructure("", "")); 
     } 
     self.promoCodes = ko.observableArray(); 
     self.promoTypes = ['%','$']; 
     self.removePromoCode = function(promoCode){ 
      self.promoCodes.remove(promoCode); 
     } 
     self.addPromoCode = function(){ 
      self.promoCodes.push(new promoCode("", ""));  
     } 
     self.divisions = ko.observableArray([new division(1, "Men","",[new division(2,"Gi"), new division(3,"No-Gi")])]); 
     self.addDivision = function(){ 
      self.divisions.push(new division("", "", "")); 
     } 

    } 
    ko.applyBindings(new tournamentViewModel()); 

इस सब में मेरा मुख्य सवाल यह है: सरणी से उस ऑब्जेक्ट को निकालने के लिए किसी ऑब्जेक्ट के पैरेंट सरणी तक पहुंचने का कोई तरीका है? मदद के लिए अग्रिम धन्यवाद!

संपादित करें: यहां एक जेएसफ़िल्ड: http://jsfiddle.net/eqY7Z/ हालांकि यह बिल्कुल काम नहीं कर रहा है। यदि आप इसे नहीं जा सकते हैं, तो मैं अपनी साइट पर लिंक शामिल करूंगा जहां इसे होस्ट किया जा रहा है ताकि आप इसे देख सकें।

Answer 1

मैंने आपका विचार लिया और working fiddle बनाया, जो वास्तव में वर्णन करता है कि आपने कैसा वर्णन किया है। मैं तुम्हारा सॉर्ट करने की कोशिश नहीं करना चाहता था, क्षमा करें। इसमें बहुत सी चीजें हैं जो आपकी समस्या से सीधे संबंधित नहीं हैं, और यह समाधान सामान्य है कि अन्य लोगों को इसका उपयोग करने में सक्षम होना चाहिए। अगर आपको इसे अनुकूलित करने में मदद की ज़रूरत है, तो मुझे बताएं।

क्लोन फ़ंक्शन का ध्यान रखना एक बात है। आपकी प्रतिलिपि फ़ंक्शन गहरी नहीं है, और परिणामस्वरूप एक ही ऑब्जेक्ट को इंगित करने वाले एकाधिक नोड्स होंगे। यदि आप नोड्स मान को अपडेट करना चाहते थे, तो यह इसके क्लोनों के लिए प्रचारित होगा। नॉकआउट ko.toJS के साथ एक आसान गहरी प्रति + अनचाहे अवलोकन योग्य प्रदान करता है। सुपर उपयोगी

जे एस:

var Node = function(name, children) { 
    var self = this; 
    self.name = ko.observable(name || 'NewNode'); 
    self.children = ko.observableArray(
    ko.utils.arrayMap(children || [], function(i) { 
     return new Node(i.name, i.children); 
    })); 
    self.newChild = function() { 
     self.children.push(new Node()); 
    }; 
    self.removeNode = function(node) { 
     self.children.remove(node); 
    }; 
    self.copyNode = function(node) { 
     var cloneNode = ko.toJS(node); 
     self.children.push(new Node(cloneNode.name, cloneNode.children)); 
    }; 
}; 

//Example data removed for brevity, see fiddle 
ko.applyBindings(new Node(data.name, data.children));​ 

HTML:

<button data-bind="click: newChild">NewNode</button> 
<ul data-bind="template: { name: 'treeTemplate', foreach: children}"> 
</ul> 

<script id="treeTemplate" type="text/html"> 
    <li> 
     <input data-bind="value: name" /> 
     <button data-bind="click: newChild">New Child</button> 
     <button data-bind="click: $parent.removeNode">Remove Node</button> 
     <button data-bind="click: $parent.copyNode">Copy Node</button> 
     <ul data-bind="template: { name: 'treeTemplate', foreach: children}"></ul> 
    </li> 
</script> 
​ 

Answer 2

मैं निम्नलिखित jsFiddle में अपने कोड की एक काम संस्करण बनाने के लिए कर रहा था: http://jsfiddle.net/3eQNf/। यह 2 मुख्य मुद्दों पर आ गया:

1. आपके विभाजन वर्ग में "इस" कीवर्ड के उपयोग के साथ आपके पास एक संदर्भ समस्या थी। स्वयं परिवर्तक जोड़ना उस समस्या को हल किया।

2. आपको एक रूट-स्तरीय विभाजन जोड़ने और अपने बच्चों से बांधने की आवश्यकता है। यह उम्मीद के अनुसार सभी रिकर्सन काम करता है। यह भी अपने tournamentViewModel के बंद addDivision विधि के लिए की जरूरत को हटा दिया

इसके अलावा, FYI करें, मैं अपने जिले, क्षेत्र के लिए स्टब्स जोड़ने के लिए आवश्यक कर रहा है, और उन के बाद से pricingStructure वर्गों के ऊपर अपने नमूना कोड में शामिल नहीं थे। उम्मीद है की यह मदद करेगा।