ऑरेलिया कस्टम तत्वों में 2 तरीके डेटाबेसिंग - पैरेंट व्यूमोडल

Question

पर कस्टम तत्व बांधें मेरे आवेदन में मैंने बहुत सी "सेवाएं" बनाई हैं जिन्हें मैं अपने दृश्यमानों में कुछ अनावश्यकता और समय बचाने के लिए इंजेक्ट कर सकता हूं।

अब मैं इसे 1 कदम आगे ले जाना चाहता हूं, और उन फॉर्म तत्वों (चयन, टेक्स्ट, चेकबॉक्स - स्टार्टर्स के लिए एक चुनिंदा ड्रॉपडाउन) बनाएं और उन्हें कस्टम तत्वों में बदल दें, केवल कस्टम तत्व में सेवा इंजेक्शन दें।

मैं इसे कुछ हद तक काम कर सकता हूं। कस्टम तत्व (इस मामले में चयन करें) दिखा रहा है जब मुझे इसे "पैरेंट" दृश्य में आवश्यकता होती है, हालांकि जब मैं कस्टम चयन तत्व का चयनित मान बदलता हूं, तो यह "पैरेंट" व्यूमोडेल से बंधे नहीं है, जो मेरी आवश्यकता है ।

मैं अपने चयनित मूल्य को कस्टम तत्व से "पैरेंट" व्यूमोडेल पर किसी संपत्ति में बाइंड में बाइंड विशेषता के माध्यम से बांधने में सक्षम होना चाहता हूं।

मैं कुछ मिनटों में एक छोटा सा कोड स्निपेट अपडेट करूंगा।

create.js (मैं क्या माता पिता viewmodel के रूप में उल्लेख)

import {bindable} from 'aurelia-framework'; 
export class Create{ 
    heading = 'Create'; 
    @bindable myCustomElementValue = 'initial value'; 
} 

create.html (जनक दृश्य)

<template> 
    <require from="shared/my-custom-element"></require> 
    <my-custom selectedValue.bind="myCustomElementValue"></my-custom> 
    <p>The output of ${myCustomElementValue} should ideally be shown and changed here, as the select dropdown changes</p> 
</template> 

मेरी-custom.js

import { inject, bindable} from 'aurelia-framework'; 
import MyService from 'my-service'; 

@inject(MyService) 
export class MyCustomCustomElement { 
    @bindable selectedValue; 

    constructor(myService) { 
     this.myService = myService ; 
    } 

    selectedValueChanged(value) { 
     alert(value); 
     this.selectedValue = value; 
    } 

    async attached() { 
     this.allSelectableValues = await this.myService.getAllValues(); 
    } 
} 

क्या ऐसा होता है शुरुआत में create.html देखें "प्रारंभिक मान" आउटपुट, और जैसा कि मैं कस्टम तत्व का चयन बदलता हूं, नया चयनित मूल्य ई को सतर्क कर दिया जाता है, लेकिन यह बाध्य पैरेंट वैरिएबल को अपडेट नहीं करता है, जो अभी भी "प्रारंभिक मान" प्रदर्शित कर रहा है।

Answer 1

यहाँ मुद्दों के एक जोड़े हैं: आप कबाब-केस करने की जरूरत है

1. केस-असंवेदनशीलता

   selected-value.bind="property"

   नहीं

   की वजह से डोम में किसी भी संपत्ति के नाम

   selectedValue.bind="property"

2. आपको दो-तरफा बांधना होगा। सजावट का उपयोग करते हुए @bindable बनाते समय, तर्कों में से एक BindingMode है जिसका उपयोग आप डिफ़ॉल्ट बाध्यकारी मोड सेट करने के लिए करते हैं।

   ऑरेलिया कुछ समझदार डिफ़ॉल्ट सेट करता है, उदा। input value.bind=".." के लिए डिफ़ॉल्ट स्पष्ट किया जा रहा बिना दो रास्ता है

   आप एक डिफ़ॉल्ट बाध्यकारी मोड सेट नहीं करना चाहते हैं, तो आप सिर्फ अपने बंधन के साथ स्पष्ट किया जा सकता है:

   selected-value.two-way="prop"

आशा इस मदद करता है :)

संपादित करें: मुझे लगता है कि इस उत्तर के बाद एपीआई थोड़ा बदल गया है।

@bindable डेकोरेटर निम्नलिखित sig है:

http://aurelia.io/docs/fundamentals/cheat-sheet