ऑरेलिया: कस्टम एलिमेंट के कस्टम फ़ंक्शंस या कस्टम विशेषताओं तक पहुंच

Question

मैं सिर्फ ऑरेलिया में कस्टम तत्व कार्यक्षमता के साथ खेल रहा हूं और 'प्रोग्रेस बार' तत्व बनाने की कोशिश की है।

प्रगति-bar.js

import {customElement, bindable} from 'aurelia-framework'; 
@customElement('progress-bar') 
export class ProgressBar 
{ 
//do stuff// 
} 

प्रगति-bar.html

<template> 
    <link rel="stylesheet" type="text/css" href="src/components/progress-bar.css"> 
    <div class='progress-bar' tabindex=0 ref="bar">bloo</div> 
</template> 

test.html (प्रासंगिक हिस्से)

<require from="./components/progress-bar"></require> 
    <progress-bar ref="pb">a</progress-bar> 

यह सब ठीक दिखाई देता है। लेकिन मैं इस बात पर संघर्ष कर रहा हूं कि मुख्य पृष्ठ कैसे प्राप्त करें, कुछ फ़ंक्शन को कॉल कर सकते हैं या तत्व पर कुछ विशेषता बदल सकते हैं, जिसे बाद में प्रगति पट्टी पर कुछ करना चाहिए।

मैंने प्रगति-bar.js के अंदर 'doSomething' फ़ंक्शन बनाने का प्रयास किया लेकिन मैं test.js. में इसका उपयोग नहीं कर सकता।

जोड़ा गया प्रगति-bar.js को

doSomething(percent, value) { 
    $(this.bar).animate('width: ${percent}%', speed); 
} 

अंदर test.js

clicked() { 
    console.log(this.pb); // this returns the progress bar element fine 
    console.log(this.pb.doSomething); //this returns as undefined 
    this.pb.doSomething(percent, value); // this fails outright with error: typeError - doSomething is not a function 
} 

अगला मैं सेटअप कस्टम करने की कोशिश की प्रगति-बार तत्व के अंदर जिम्मेदार बताते हैं और हो सकता है valueChange का उपयोग करने के बजाय div बदलने के लिए ।

अंदर प्रगति-bar.js

@bindable percent=null; 
@bindable speed=null; 

test.js

clicked() { 
this.pb.percent=50; //this updated fine 
this.pb.speed=1500; //this updated fine 

} 

वहाँ कोई बात नहीं, लगभग वहाँ। लेकिन जब कोई विशेषता बदलती है तो मैं कॉल करने के लिए एक हैंडलर कैसे सेट करूं?

मैं एक ट्यूटोरियल जो इस वाक्य रचना की थी पाया:

@bindable({ 
    name:'myProperty', //name of the property on the class 
    attribute:'my-property', //name of the attribute in HTML 
    changeHandler:'myPropertyChanged', //name of the method to invoke on property changes 
    defaultBindingMode: ONE_WAY, //default binding mode used with the .bind command 
    defaultValue: undefined //default value of the property, if not bound or set in HTML 
}) 

लेकिन मैं अपने प्रगति-bar.js में उस कोड का उपयोग नहीं कर पा रहे। पेज के बाद मैं में है कि जोड़ने के ठीक से प्रस्तुत करने में विफल रहता Gulp किसी भी त्रुटि संदेश लेकिन ब्राउज़र कंसोल रिटर्न इस त्रुटि वापस आ गए प्रतीत नहीं होता है:।

ERROR [app-router] Router navigation failed, and no previous location could be restored.

कौन सा संदेश है मैं सामान्य रूप से जब मैं मिल मेरे पृष्ठों पर कहीं कुछ वाक्यविन्यास त्रुटि है।

इस कस्टम तत्वों के लिए सही उपयोग है:

कई बातों मैं यहाँ की अनिश्चित हूँ कर रहे हैं? क्या हम उनके अंदर कार्यों के साथ कस्टम तत्व बना सकते हैं? क्या हम कस्टम विशेषताओं के साथ कस्टम तत्व बना सकते हैं जो उसके मूल्यों को बदलते समय ईवेंट ट्रिगर कर सकते हैं?

पूरे कोड पोस्ट न करने के लिए क्षमा चाहते हैं, क्योंकि अलग-अलग चीजों को आजमाने के दौरान मेरे पास इतनी विविधताएं हैं।

Answer 1

Aurelia साथ

, आप अपने घटक में इस सम्मेलन का उपयोग कर सकते हैं: yourpropertynameChanged()

import {customElement, bindable, inject} from 'aurelia-framework'; 
import $ from 'jquery'; 

@customElement('progress-bar') 
@inject(Element) 
export class ProgressBar 
{ 
    @bindable percent; 
    @bindable speed; 

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

    percentChanged(){ 
     doSomething(this.percent, this.speed); 
    } 

    speedChanged(){ 
     doSomething(this.percent, this.speed); 
    } 

    doSomething(percent, value) { 
     $(this.element).animate('width: ${percent}%', value); 
    } 
} 

आप outsite से doSomething() को एक्सेस करने के लिए जरूरत नहीं है।
लेकिन तुम सिर्फ गुणों को बदलने की जरूरत है:

<progress-bar percent="${pb.percent}" speed="${pb.speed}">a</progress-bar> 

Answer 2

मैं एक सरल lazier दृष्टिकोण लिया है और nprogress का उपयोग कर रहा है, तो आप nprogress.set(0.4) उपयोग कर सकते हैं, लेकिन मैं डिफ़ॉल्ट उपयोग कर रहा हूँ "कुछ हो रहा है" व्यवहार ।

import nprogress from 'nprogress'; 
import {bindable, noView} from 'aurelia-framework'; 

@noView 
export class LoadingIndicator { 
    @bindable loading = false; 

    loadingChanged(newValue){ 
    newValue ? 
     nprogress.start() : 
     nprogress.done(); 
    } 
} 

Answer 3

पहले बाँध अपने कस्टम तत्व को किसी वस्तु, उदाहरण के लिए "config":

<custom-element config.bind="elementConfig"></custom-element> 

तो अपने पेज js फ़ाइल में

:

someFunction(){ this.elementConfig.elementFunction(); } 

और में अपने कस्टम तत्व एक जोड़ने इस तरह का कार्य:

@bindable({ name: 'config', attribute: 'config', defaultBindingMode: bindingMode.twoWay }); 
export class JbGrid { 
    attached() { 
     this.config.elementFunction = e=> this.calculateSizes(); 
    } 
    calculateSizes() { 
    //your function you want to call 
    } 
} 

अब आपके पास अपने फ़ंक्शन में कस्टम तत्व "यह" तक पहुंच है।