Apelarea codului cu comenzi și EXEC

jComponent 20 · jcomponent@20 jcomponentfrontendcommands Executată cu jComponent 20

Două moduri de a declanșa cod fără o referință directă la obiectul care îl deține:

O componentă înregistrează o comandă cu self.command(name, fn), iar codul care deține instanța componentei o rulează cu instance.CMD(name, a, b, c) (element[0].$uicomponent este instanța unui ui-component). Folosește-o pentru acțiuni precum „deschide această fereastră” sau „reîmprospătează acea listă”. CMD(name) global ar trebui să ajungă la fiecare componentă, dar în jComponent 20.014 taie un nume fără spațiu, deci nu face nimic: folosește instanța sau EXEC().
EXEC('plugin/method', a, b) apelează metoda method a plugin-ului care trăiește pe calea plugin; un nume simplu de funcție (EXEC('myfunction')) apelează o funcție globală. Comanda exec din ui-bind și opțiunea exec a multor componente acceptă aceleași nume.

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<ui-plugin path="cart">
		<p>Items: <ui-bind path="?.count" config="text:value"></ui-bind></p>
	</ui-plugin>
	<ui-component name="notice" id="notice"></ui-component>

	<script>

		PLUGIN('cart', function(self) {
			self.add = function(n) {
				self.set('count', (self.get('count') || 0) + n);
			};
			self.make = function() {
				self.set('count', 0);
			};
		});

		COMPONENT('notice', function(self) {
			self.make = function() {
				self.html('<i class="text"></i>');
				self.command('say', function(text) {
					self.find('.text').text(text);
				});
			};
		});

		function logout(arg) {
			window.loggedout = arg;
		}

	</script>

</body>
</html>

Încearcă în browserul tău

Editează exemplul și rulează-l. Rulează într-un cadru izolat din browserul tău; nimic nu este trimis către serverul nostru.

Cod

Previzualizare