Knockout.js मैं कैसे कर एक उप संपत्ति

Question

मैं जानता हूँ कि एक संपत्ति के लिए बाध्य करने के लिए कैसे करने के लिए बाध्य है, लेकिन मैं कैसे की तरह एक संपत्ति के लिए बाध्य करते हैं: Parent.Child

नॉकआउट जेएस पर हैलो दुनिया उदाहरण का उपयोग करना। कॉम: एचटीएमएल:

<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName" /></p> 
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2> 
<h2>ChildProperty: <span data-bind="text: parentProperty.childProperty"> </span>!</h2> 

जावास्क्रिप्ट:

var ViewModel = function(first, last) { 
this.firstName = ko.observable(first); 
this.lastName = ko.observable(last); 
this.parentProperty = ko.observable(
    { 
     childProperty: "I am a child Property" 
    }); 

this.fullName = ko.computed(function() { 
    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName  and lastName, because these get called when evaluating fullName. 
     return this.firstName() + " " + this.lastName(); 
    }, this); 
}; 

ko.applyBindings(new ViewModel("Planet", "Earth")); 

मैं childProperty करने के लिए एक बाध्यकारी बनाने के लिए करना चाहते हैं।

मैं एक jsfiddle here

धन्यवाद

Answer 1

तो इतना बहुत करीब बना चुके हैं!

आप

<span data-bind="text: parentProperty().childProperty"> </span> 

आपका अपडेट किया गया बेला http://jsfiddle.net/szk2e/2/

Answer 2

यहाँ एक जवाब को जोड़ने के रूप में यह मेरी विशेष स्थिति के लिए सबसे अच्छा फिट है चाहता हूँ ...

एक स्थिति है जहाँ टिम जवाब जीता है काम नहीं करता यह तब होता है जब मूल संपत्ति undefined हो सकती है।

उदाहरण के लिए, आप ItemsSource और SelectedItem (जिसमें उपयोगकर्ता को एक सूची से एक आइटम का चयन करता है) SelectedItem की आम पैटर्न उपयोग कर रहे हैं हो जाएगा अपरिभाषित पहले मूल्यांकन पर, और जब भी उपयोगकर्ता ने अपने चयन को पूर्ववत कर दिया है। बाध्यकारी text:selectedItem().SomeProperty का उपयोग करके नॉकआउट "ब्रेक" होगा, बाइंडिंग का मूल्यांकन होने से रोकें। नोट, visible बाध्यकारी (उदाहरण के लिए, text:selectedItem().SomeProperty, visible:selectedItem) का उपयोग करके शॉर्ट सर्किट करने का प्रयास करना काम नहीं करेगा।

इस मामले में, आपको with बाध्यकारी को बाध्यकारी संदर्भ को संपत्ति के मूल्य पर स्विच करने के लिए उपयोग करना होगा। तो, ओपी के उदाहरण का उपयोग करते हुए ...

<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName" /></p> 
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2> 
<h2 data-bind="with:parentProperty">ChildProperty: 
    <span data-bind="text: childProperty"></span>! 
</h2> 

ध्यान दें कि यह बाध्यकारी के व्यवहार (डॉक्स से) है

बाध्यकारी गतिशील जोड़ सकते हैं या कि क्या जुड़े मूल्य के आधार पर वंशज तत्वों निकाल देंगे साथ

नहीं तुम भी है कि प्रॉपर्टी अपरिभाषित है या नहीं, तो आप <!-- ko --> आभासी तत्व का उपयोग करना चाहिए कंटेनर चारों ओर के आधार पर कंटेनर को छिपाने के लिए की जरूरत है अशक्त/अपरिभाषित या है। More information can be found here.