j-DynamicValueList

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Αυτό το συστατικό είναι ένα πολύ ειδικό στοιχείο. Μπορεί να διατηρήσει τιμές για παράδειγμα Number και στο ίδιο μπορεί να κάνει μια άλλη ανάγνωση text. Αυτό το στοιχείο είναι βελτιστοποιημένο για δυναμική χρήση, έτσι πρέπει να συνδεθεί με άλλο συστατικά ή τμήμα.

ΕΠΙΤΡΟΦΗ:

icon {String} εικονίδιο για την ετικέτα, π.χ. σπίτι, cog, κλπ.
Ετικέτα label {String} (προεπιλεγμένο είναι το περιεχόμενο HTML)
Το εικονίδιο icon2 {String} στο δεξί πλαίσιο, για παράδειγμα, σπίτι, κ.λπ. (προεπιλεγμένο: angle-down)
Το placeholder {String} προσθέτει κείμενο
Το disabled {Boolean} απενεργοποιεί αυτό το συστατικό
find {String} important σύνδεση με το function(el, next(value)) για να δεσμεύσετε μια νέα τιμή
read {String} σύνδεση με το function(array_of_values, next(array_response)) για να δεσμεύσετε ένα αναγνωρίσιμο text
Το url {String} προσπαθεί να συνδέσει μια τιμή μέσω του AJAX(), το επιχείρημα {0} στην URL αντικαθίσταται από την τιμή
html {String} Tangular πρότυπο για την αναπαραγωγή μιας αξίας (προεπιλεγμένη: {{ name }})
remap {String} Η λειτουργία αναβάθμισης (default) nullΓια παράδειγμα: value.length ? value[0] : null
Το required {Boolean} επιτρέπει το «αναγκαίο» (προεπιλεγμένο: false)
bind {String} ένα μονοπάτι προς τη μέθοδο ή την μεταβλητή όπου θα δεσμευτεί η φορτισμένη αξία (επιλεγμένη)
dirsource {String} μια σύνδεση με τη μέθοδο function(search_string, next(items_arr)) ή NEW: μπορεί να περιέχει URL για την αναζήτηση σε μορφή GET /api/partners/?q={0}
Το dircustom {String/Boolean} μπορεί να περιέχει ένα μονοπάτι προς τη λειτουργία(val, next(new_val)) ή μπορεί να είναι Boolean. Αυτή η επιλογή μπορεί να επιτρέπει την προσθήκη μιας προσαρμοσμένης αξίας (αξία που δεν ορίζεται στην πηγή δεδομένων)
dirrender {String} ένα μονοπάτι προς function(item, text) (πρέπει να επιστρέψει το HTML για j-Directory), αυτή η λειτουργία μπορεί να επηρεάσει τη λίστα των στοιχείων στο j-Directory
dirminwidth {Number} ελάχιστη πλάτος για j-Directory, (προεπιλεγμένη: 200)
dirmaxwidth {Number} Μέγιστο εύρος για j-Directory
dirplaceholder {String} για το j-Directory
Το dirempty {String} προσθέτει ένα κενό πεδίο για το j-Directory
dirkey {String} ένα όνομα κλειδί για την ανάγνωση του κειμένου σε απευθείας πηγή (προεπιλεγμένο: name)
dirvalue {String} ένα όνομα κλειδί για την ανάγνωση της αξίας στην πηγή (προεπιλογή: id)
key {String} ένα κύριο όνομα κλειδιού (προεπιλεγμένο: τιμή από dirvalue)
NEW tapi {Boolean} επιτρέπει την κλήση TAPI() insteadof AJAX() (προεπιλεγμένη: ψεύτικη)

Χρησιμοποιήστε το Ajax

Αν η value Θα αλλάξει και τότε το στοιχείο θα AJAX Ο διακομιστής πρέπει να απαντήσει με Array.

<ui-component name="dynamicvaluelist" path="path.to.property" config="url:/users/?id={0};dirsource:GET /users/?search={0}"></ui-component>

Εσωτερική χρήση

Εάν το value αλλάξει, τότε το συστατικό εκτελεί το config.exec για να πάρει ένα αναγνωρίσιμο κείμενο μιας αξίας.

<ui-component name="dynamicvaluelist" path="path.to.property" config="read:my_function"></ui-component>

<script>
	function my_function(arr, next) {
		// the component automatically pairs "response" with "arr"
		next([{ id: 1, name: 'This text will be displayed as a value '}]);
	}
</script>

Χρησιμοποιήστε το με <ui-component name="dynamicvaluelist">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

example.html

<ui-component name="directory"></ui-component>

<div class="m" style="width:300px">
	<ui-component name="dynamicvaluelist" path="common.users" config="read:getusers;dirsource:findusers;placeholder:Add user">Users</ui-component>
</div>

<script>
	var names = [];
	names.push({ id: '1', name: 'Denis' });
	names.push({ id: '2', name: 'Peter' });
	names.push({ id: '3', name: 'Tomáš' });
	names.push({ id: '4', name: 'Lucka' });
	names.push({ id: '5', name: 'Lenka' });

	function getusers(value, next) {
		var temp = [];
		for (var i = 0; i < value.length; i++) {
			var user = names.findItem('id', value[i]);
			user && temp.push(user);
		}
		next(temp);
	}

	function findusers(search, next) {
		var items = names.slice(0);
		next(items);
	}

</script>