क्या Aurelia में सही तरीका

Question

repeat.for का उपयोग कर Aurelia का उपयोग करते हुए मैं बंधन और repeat.for के साथ संघर्ष कर रहा हूँ एक कस्टम तत्व पर बाध्य करने के लिए है: लगता है मैं एक संपत्ति menuItems के साथ अपने viewmodel (MenuItem की एक सरणी) मैं में है (मेनू item.html)

export class App { 
    menuItems : MenuItem[]; 
} 
export class MenuItem{ 
    label:string; 
} 

मेरे एप्लिकेशन टेम्पलेट में मैं एक कस्टम तत्व

<require from="./menu-item"></require> 
<ul> 
    <menu-item repeat.for="item of menuItems"></menu-item> 
</ul> 

मेरे कस्टम टेम्पलेट का उपयोग का उपयोग करें:: एक कस्टम टेम्पलेट के साथ menuitems को दोहराना चाहते हैं

<template> 
    <li>${label}</li> 
</template> 

टेम्पलेट को बाध्य करने या बाध्य मेनूइटम तक पहुंचने का सही तरीका क्या है?

मैंने निम्नलिखित कोशिश की है: ${label} और ${item.label} लेकिन यह काम नहीं करता है। मैं bind(bindingContext) कॉलबैक में देख सकता हूं कि बाइंडिंग कॉन्टेक्स्ट में एक संपत्ति 'आइटम' है: bindingContext.item जो मेनूइटम है जो बाध्य है।

export class MenuItem{ 
    @bindable current any; 
    label:string; 
} 

और निम्नलिखित पुनरावर्तक:

<menu-item repeat.for="item of menuItems" current.bind="item"></menu-item> 

और एक इसी टेम्पलेट

<template> 
    <li>${current.label}</li> 
</template> 

ध्यान दें:

मैं भी MenuItem वर्ग पर bindable विशेषता बनाने की कोशिश की देख कोड में इस बिंदु पर मेरी टिप्पणी के लिए नीचे 1 संपादित करें।

यह दृष्टिकोण भी काम नहीं करता है।

अन्य खोजों में <compose view-model='MenuItem', model.bind='item'/> का उपयोग करके कस्टम तत्व (काम किया) का उपयोग नहीं किया गया है, इस उदाहरण में काम नहीं करता है और मुझे लगता है कि विस्तृत करना होगा।

कार्य समाधान, यह भी Aurelia repeat.for binding on a custom element देखें:

<menu-item repeat.for="item of menuItems" current.bind="item" containerless></menu-item> 

viewmodel वर्ग:

import {bindable, customElement} from 'aurelia-framework' 

@customElement('menu-item') 
export class MenuItem{ 
    label = "default label"; 
    @bindable current; 

    constructor(label){ 
    this.label = label; 
    } 
    attached(){ 
    console.log("MenuItem = attached"); 
    } 
} 

संपादित करें 1 टेम्पलेट और viewmodel वर्ग की एक कस्टम विशेषता पर

दोहराने और बाँध :

मैं टी में देखता हूं वह मेनू आइटम्स के लिए दोहराए गए टेम्पलेट्स के एचटीएमएल को दोहराता है। लेकिन ये आइटम बाध्य नहीं हैं: <li> खाली है। मुझे लेबल देखने की उम्मीद है।

संपादित करें 2:

इस पोस्ट में

मैं "menuItems में आइटम" आपके द्वारा लिखा गया, जिसे ठीक यह "menuItems के आइटम" होना चाहिए नहीं है।लेकिन यह है कि मेरे संघर्ष का कारण नहीं था, मैं यह था इस पोस्ट में गलत टाइप किया केवल

संपादित करें 3:

@ जेरेमी-danyow सुझाव दिया है कि

• एचटीएमएल अच्छी तरह का गठन किया जाना चाहिए: मेनू उल के भीतर -टिम सही नहीं है (containerless विशेषता का उपयोग मेनू-आइटम तत्व को हटाकर मदद करता है)
• कस्टम तत्वों का हमेशा एक बंद टैग होना चाहिए मैंने कोड को अनुकूलित किया है। एक @bindable विशेषता प्रदान की Aurelia repeat.for binding on a custom element

यही काम करता है plunker;: इसके अलावा, मैं एक plunker बनाया

Answer 1

ब्राउज़र केवल ul तत्वों के अंदर तत्वों को अनुमति देते हैं। <ul><menu-item></menu-item></ul> उसी तरह से अवैध मार्कअप है जिस तरह से <ul><div></div></ul> अमान्य मार्कअप है।

<menu> तत्व बनाने पर विचार करें जिसका टेम्पलेट ul है और इसके बजाय li तत्व हैं।

एक और बात- केवल कुछ मानक तत्व "स्वयं बंद" हैं - जैसे इनपुट, आदि कस्टम तत्वों का हमेशा एक बंद टैग होना चाहिए। बुरा: <menu-item /> अच्छा: <menu-item></menu-item>

आप सोच रहे होंगे हो सकता है? "क्यों नहीं कर सकते हैं Aurelia आंकड़ा मेरे लिए यह बाहर"

मान्य प्रश्न। यहां बताया गया है: ऑरेलिया कस्टम एचटीएमएल पार्सर को लागू नहीं करता है। यह मानक एचटीएमएल पार्स करने के लिए डीओएम का उपयोग करता है। यह अन्य ढांचे के मुकाबले अलग है जो गैर-मानक मार्कअप सिंटैक्स के लिए कस्टम पार्सर्स को कार्यान्वित करने के आदी हो सकते हैं।