2012-10-01 36 views
11

मेरे पास यह ड्रॉपडाउन है जिसमें वाहन नए हैं या उपयोग किए जाने पर विकल्प हैं।ड्रॉपडाउन परिवर्तन पर अवलोकन योग्य मूल्य बदलें नॉकआउट जेएस

<select name="VehicleType" id="vehicleTypeDropdown" data-bind="value: VehicleType">  
    <option value="New" selected="selected">Nuevo</option> 
    <option value="Used">Usado</option> 
</select> ` 

और यह इनपुट:

<input type="text" name="Mileage" data-bind="disable: VehicleType() === 'New',value: Mileage" class="input-large"> ` 

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

उत्तर

21

आपके व्यू मॉडल में मैन्युअल सदस्यता इस तरह कुछ संभालने का एक अच्छा तरीका है। सदस्यता देखो की तरह हो सकता है: http://jsfiddle.net/rniemeyer/h4cKC/

एचटीएमएल:

<select name="VehicleType" id="vehicleTypeDropdown" data-bind="value: VehicleType"> 
    <option value="New" selected="selected">Nuevo</option> 
    <option value="Used">Usado</option> 
</select> 

<input type="text" name="Mileage" data-bind="disable: VehicleType() === 'New', value: Mileage" class="input-large"> 
<hr/> 

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre> 

जे एस:

var ViewModel = function() { 
    this.VehicleType = ko.observable(); 
    this.Mileage = ko.observable(); 

    this.VehicleType.subscribe(function(newValue) { 
     if (newValue === "New") { 
      this.Mileage(0); 
     } 
    }, this); 
}; 

ko.applyBindings(new ViewModel()); 
+0

धन्यवाद, यह पूरी तरह से काम करता है। – Overmachine

+2

@ आरपी - एक और मणि! ड्रॉपडाउन मान दिए गए, टेक्स्टफील्ड को किसी मान पर सेट करने के लिए इसका उपयोग करने के लिए इसे अपने स्वयं के उपयोग के लिए अनुकूलित करने में सक्षम था। धन्यवाद! स्पष्ट रूप से नॉकऑट जेएस दस्तावेज की कमी होनी चाहिए, क्योंकि मैंने अब तक 'सदस्यता छोड़ें) नहीं देखा था। – vapcguy

+0

शानदार धन्यवाद – Andrew

1
this.VehicleType.subscribe(function(newValue) { 
    if (newValue === "New") { 
     this.Mileage(0); 
    } 
}, this); 

यहाँ यह का उपयोग कर एक नमूना हैयदि आप ko mapping plugin का उपयोग कर रहे हैं तो आप एक नई वस्तु के निर्माण को रोक सकते हैं और वहां सदस्यता स्थापित कर सकते हैं। यदि आपके पास आइटम की पूरी सूची है और जब आप कुछ बदलते हैं तो आप एक क्रिया करना चाहते हैं। (जैसे qty, sku, description, price के रूप में गुण)

यह खरीदारी की टोकरी पंक्ति आइटम के लिए एक दृश्य के मॉडल है।

// View Model for an item in my shopping cart 
var CartItemViewModel = function(data) 
{ 
    // map all the properties 
    // we could map manually if we want, but that's the whole point of 
    // the mapping plugin that we don't need to 
    ko.mapping.fromJS(data, {}, this); 

    // subscribe to qty change 
    this.qty.subscribe(function (newValue) 
    { 
     alert('qty now ' + this.qty()); 
     // UpdateCart() 

    }, this);  

    // add computed observables if needed 
    // .... 
} 

जब आप मानचित्रण प्लगइन का उपयोग कर अद्यतन (या बनाने के) अपने मॉडल आप एक संपत्ति 'आइटम' श्रेणी में प्रत्येक तत्व कहा जाता है के लिए निर्दिष्ट करते हैं कि साथ बनाया जाना चाहिए 'बनाने' आपके द्वारा निर्दिष्ट कार्य करते हैं।

var mapping = 
    { 
     'items': 
     { 
      // map cart item 
      create: function (options) 
      { 
       return new CartItemViewModel(options.data); 
      } 
     } 
    }; 

    var data = ...... // get your data from somewhere 

    // update the CartViewModel using the mapping rules 
    ko.mapping.fromJS(data, mapping, rrvm.CartViewModel);