knockoutjs में चेकबॉक्स निर्भरता कैसे लागू करने के लिए

Question

मैं चेक बॉक्स का एक समूह है

• चेकबॉक्स एक
• चेकबॉक्स बी
• चेकबॉक्स सी

foreach डेटा बाइंडिंग के साथ जनरेट की गई

<input type="checkbox" data-bind="value: id, checked: $root.chkboxSelected" /> 

जो उन्हें लेते हैं एक अवलोकन योग्य से चेक राज्य। तो एक बॉक्स की जांच करने से सरणी में मानक मान जोड़ा जाएगा, मानक knockoutjs जो ठीक काम करता है। मैं फिर एक साधारण नियम जोड़ना चाहता था:

यदि सी चेक किया गया है, तो ए और बी को भी चेक किया जाना चाहिए।

knockoutjs में इस प्रकार के तर्क को जोड़ने का सबसे साफ तरीका क्या है? मैं एक लिखने योग्य गणनीय नमूदार साथ करने की कोशिश की:

var viewModel = { 
     foo: observableArray(), 
     .. 
    }; 

viewModel.chkboxSelected = ko.computed({ 
     read: function() { 
     return this.foo(); 
     }, 
     write: function(value){ 
      //add it if not added already 
     if($.inArray(value, this.foo()) < 0) { 
      this.foo.push(value); 
     } 

      // if C is present then A,B must be as well   
     if($.inArray("C", this.foo()) >= 0) { 
      if($.inArray("B", this.foo()) < 0) { 
      this.foo().push("B"); 
      } 

      if($.inArray("A", this.foo()) < 0) { 
       this.foo().push("A"); 
      } 

     } 
     }, 
     owner: viewModel 
    }); 

पढ़ने पर एक ब्रेकपाइंट लाना और कार्यों लिखें: पढ़ा बुलाया जाता है और पृष्ठ लोड ठीक। हालांकि, जब मैं तो किसी भी चेकबॉक्स मैं निम्नलिखित त्रुटि मिलती है पर क्लिक करें (लिखने ब्रेकप्वाइंट हिट हो जाता है कभी नहीं):

knockout-2.0.0.debug.js:2297 

Uncaught TypeError: Object function dependentObservable() { 
     if (arguments.length > 0) { 
      if (typeof options["write"] === "function") { 
       // Writing a value 
       var valueForThis = options["owner"] || evaluatorFunctionTarget; // If undefined, it will default to "window" by convention. This might change in the future. 
       options["write"].apply(valueForThis, arguments); 
      } else { 
       throw "Cannot write a value to a dependentObservable unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters."; 
      } 
     } else { 
      // Reading the value 
      if (!_hasBeenEvaluated) 
       evaluateImmediate(); 
      ko.dependencyDetection.registerDependency(dependentObservable); 
      return _latestValue; 
     } 
    } has no method 'push' 

Answer 1

checked बाध्यकारी एक सरणी के खिलाफ ही है, तो इसके खिलाफ सरणी कार्रवाई करने में सक्षम होना चाहिए यह। इसलिए, उस मामले में एक लिखने योग्य गणना योग्य उपयोग करने से समस्या उत्पन्न होगी।

हालांकि, आप अपने आइटम को सिंक में रखने के लिए मैन्युअल सदस्यता का उपयोग करने का विकल्प चुन सकते हैं।

यहां एक नमूना दृश्य मॉडल है:

var ViewModel = function() { 
    var self = this; 
    this.items = ko.observableArray([ 
     { id: "A" }, 
     { id: "B" }, 
     { id: "C" }, 
     { id: "D" } 
     ]); 
    this.checked = ko.observableArray(); 
    this.checked.subscribe(function(newValue) { 
     if (self.checked.indexOf("C") > -1) { 
      if (self.checked.indexOf("A") < 0) { 
       self.checked.push("A"); 
      } 
      if (self.checked.indexOf("B") < 0) { 
       self.checked.push("B"); 
      } 
     } 
    }); 

    this.shouldBeDisabled = function(item) { 
     return (item.id === "B" || item.id ==="A") && self.checked.indexOf("C") > -1;  
    }; 
}; 

यहाँ दृश्य है:

<ul data-bind="foreach: items"> 
    <li> 
     <span data-bind="text: id"></span> 
     <input type="checkbox" data-bind="attr: { value: id }, checked: $root.checked, disable: $root.shouldBeDisabled($data)" /> 
    </li> 
</ul> 

मैं attr: { value: id } बजाय value इस्तेमाल किया ईवेंट हैंडलर कि बाध्यकारी मूल्य द्वारा संलग्न किया जाएगा से बचने के लिए, चूंकि मान बाध्यकारी को किसी फ़ील्ड में परिवर्तनों को संभालने के लिए डिज़ाइन किया गया है। इस मामले में, हम केवल मूल्य विशेषता सेट करना चाहते हैं। यहाँ

नमूना: http://jsfiddle.net/rniemeyer/tQJMg/