2015-05-19 9 views
6

मुझे किसी ऑब्जेक्ट को किसी फ़ॉर्म से जोड़ने वाले डेटा को अजीब व्यवहार का सामना करना पड़ रहा है जिसने मुझे फिर से सवाल उठाने का नेतृत्व किया कि वास्तव में डेटा बाध्य क्या है?जेएसवीव्स रूट ऑब्जेक्ट के साथ-साथ इसके नेस्टेड गुणों पर डेटा बाइंडिंग कैसे करें?

असल में मेरे पास एक ऐसा फॉर्म है जो नई कंपनियों को बनाता है और साथ ही अपडेट करता है। वास्तविक निर्माण/अद्यतन AJAX के माध्यम से किया जाता है, यही कारण है कि मैं दोनों उद्देश्यों के लिए एक ही रूप का उपयोग कर रहा हूं। इस मामले में जब मुझे एक कंपनी बनाना है, तो सबकुछ काम करता है जैसा मैं उम्मीद करता हूं। हालांकि जब मुझे एक कंपनी को अपडेट करना होता है, तो चीजें काम नहीं करतीं जैसे कि मैं उन्हें कैसे उम्मीद करता हूं। कृपया निम्नलिखित कोड देखें।

<div id="result"></div> 

<script type="text/x-jsrender" id="CompanyFormTemplate"> 
    <form> 
     <input type="text" data-link="Company.Name" /> 
    </form> 
</script> 

यहाँ मेरी जावास्क्रिप्ट कोड है:

यहाँ मेरी नमूना HTML फ़ॉर्म है

var app = new CompanyFormContext(); 

function CompanyFormContext() { 
    this.Company = { 
     Name: '' 
    }; 

    this.setCompany = function (company) { 
     if (company) { 
      $.observable(this).setProperty('Company', company); 
     } 
    }; 
}; 

$(function() { 
    initPage(); 

    ... 

    if (...) { 
     // we need to update company information 

     app.setCompany({ Name: 'Company ABC' }); 
    } 
}); 

function initPage() { 
    var template = $.templates('#CompanyFormTemplate'); 
    template.link("#result", app); 
} 

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

तो मेरा सवाल यह है कि मैं इस कोड को लिखने के तरीके को कैसे बदलूं ताकि मैं रूट ऑब्जेक्ट के साथ-साथ संपत्ति दोनों पर एक डेटा प्राप्त कर सकूं?

उत्तर

3

जो समस्या आप कर रहे थे वह आपके कारण था क्योंकि आपके पास Company.Name जैसे पथ हैं जिसके लिए आप न केवल पत्ती की संपत्ति में परिवर्तनों के डेटा-लिंक करना चाहते हैं बल्कि पथ में उच्च वस्तुओं को बदलने के लिए भी शामिल हैं इस मामले में कंपनी)।

इसके लिए आपको वाक्यविन्यास data-link="Company^Path" का उपयोग करने की आवश्यकता है। पत्ती परिवर्तन या गहरी परिवर्तन इस दस्तावेज़ विषय में: http://www.jsviews.com/#[email protected]

अनुभाग पथ देखें।

जैसे उदाहरण भी देखें उदाहरण: इस विषय में सादे ऑब्जेक्ट्स और सरणी के साथ जेएसवीव्स: http://www.jsviews.com/#explore/objectsorvm

यहां सिंटैक्स का उपयोग करके, अपने jsfiddle का एक अपडेट है: https://jsfiddle.net/msd5oov9/2/। नीचे अपनी टिप्पणी में अपने अनुवर्ती सवाल का भी जवाब देने के लिए

<form class="form-horizontal"> 
    {^{for Company}} 
     ... 
     <input type="text" data-link="Name" /> 
    {{/for}} 
</form> 

: आप वैकल्पिक रूप से लिखा जा सकता था -

Btw, Fwiw, {^{for}} का उपयोग कर अपने को ठीक करने में आप एक दूसरे टेम्पलेट का उपयोग करने नहीं था , आप टेम्पलेट के साथ किसी भी 'ब्लॉक' टैग को जोड़ सकते हैं। टैग पर tmpl=... का उपयोग करने का अर्थ है कि आपने अलग-अलग पुनः उपयोग करने योग्य टेम्पलेट में ब्लॉक सामग्री को अलग करने का निर्णय लिया है। (ए 'आंशिक', यदि आप करेंगे)। उस टेम्पलेट के लिए डेटा संदर्भ वही होगा जैसा कि यह ब्लॉक के भीतर होता।

तो विशेष रूप से, {{include}} {{if}} और {{else}} टैग डेटा संदर्भ को स्थानांतरित नहीं करते हैं, लेकिन {{for}} और {{props}} करते हैं। कस्टम टैग आप तय कर सकते हैं ... साथ

तो आपके मामले में आप देखेंगे कि आप <input type="text" data-link="Company^Name" /> बजाय <input type="text" data-link="Name" /> का प्रयोग करेंगे संदर्भ या तो {^{for Company tmpl=.../}} या {{include tmpl=.../}} लेकिन दूसरे मामले में अपने अन्य टेम्पलेट का उपयोग कर सकते हैं।

यहाँ कुछ प्रासंगिक लिंक कर रहे हैं:

+0

आप उचित अनुभागों के लिंक साझा करने के लिए बहुत बहुत धन्यवाद! विडंबना यह है कि मैं अतीत में दोनों बिंदुओं पर दोनों वर्गों से गुजर चुका था, लेकिन जब मैं इस कोड को लिख रहा था तो यह मेरे साथ नहीं हुआ था जो मुझे करना था। एक मामूली सवाल: क्या कोई अन्य रचना है जिसका उपयोग मुझे टेम्पलेट एक्स का उपयोग करके ऑब्जेक्ट को प्रस्तुत करने के लिए उपयोग करने के लिए किया जाना चाहिए? –

1

मैंने इसे प्राप्त करने के लिए एक तरीका खोजा। यह पहले जटिल लग सकता है लेकिन इसे समझने के बाद यह समझ में आ जाएगा।

(पुनश्च: मैं चाहता हूँ इस तरह एक नमूना था मैं तो बस यह के बारे में ब्लॉग हो सकता है।।)

एचटीएमएल मार्कअप:

<script type="text/x-jsrender" id="CompanyFormTemplate"> 
    <form> 
     {^{for Company tmpl="#CompanyDetailsTemplate" /} 
    </form> 
</script> 

<script type="text/x-jsrender" id="CompanyDetailsTemplate"> 
    <input type="text" data-link="Name" /> 
</script> 

जावास्क्रिप्ट: कोई परिवर्तन नहीं ऊपर कोड से आवश्यक।


ठीक है तो जैसा कि मैंने कहा, समाधान जटिल लग सकता है लेकिन यह पता चला सब मैं वास्तव में करना था कंपनी वस्तु पर पहली बाध्यकारी डेटा स्थापित करने के लिए था, और फिर इसे संपत्ति वस्तुओं है करने के लिए। मुझे आश्चर्य है कि क्या एक और अधिक सुरुचिपूर्ण समाधान है (यानी एक जिसमें यह सब एक ही टेम्पलेट में हासिल किया जा सकता है) हालांकि यह समाधान सुनिश्चित करता है कि डेटा-बाध्यकारी मूल वस्तु के साथ-साथ इसके गुणों पर भी हो रहा है।

मैंने इस समाधान के लिए JsFiddle पोस्ट किया है, इसलिए यदि कोई इस समस्या से आता है और यह समझना चाहता है कि यह समाधान उनकी विशेष समस्या के लिए कैसे काम करेगा, तो वे एक समाधान समाधान के साथ खेल सकेंगे।

संबंधित मुद्दे