Mit Javascript interaktiv machen

Wir können jetzt alles mit etwas Javascript verknüpfen, damit es sich interaktiv anfühlen. Beginne, indem Du zum Template-Editor wechselst und die Javascript-Datei bearbeitest, die wir zuvor erstellt haben.

Der Javascript-Controller, den wir schreiben, wird zwei Dinge tun:

• Den ersten Datensatz laden, wenn die Seite geladen wird.
• Auf die Klickereignisse reagieren, wenn der Benutzer auf die anderen Datensätze in der Liste klickt, um diese zu laden

Hier ist der endgültige Javascript-Code, den Du in die Datei einfügen musst. Wir werden ihn in Kürze erklären:

/**
 * IPS Social Suite 4
 * (c) 2013 Invision Power Services - http://www.invisionpower.com
 *
 * ips.releaseNotes.main.js - Release notes controller
 *
 * Author: Rikki Tissier
 */
;( function($, _, undefined){
	"use strict";

	ips.controller.register('pages.front.releaseNotes.main', {

		_ajaxObj: null,

		initialize: function () {
			this.on( 'click', '[data-releaseID]', this.showRelease );
			this.setup();
		},

		setup: function () {
			// Find the current release if available
			var showFirst = this.scope.find('[data-role="releases"] [data-currentRelease]');

			if( !showFirst.length ) {
				showFirst = this.scope.find('[data-role="releases"] [data-releaseID]').first();
			}

			if( showFirst.length ){
				showFirst.click();
			}
		},

		showRelease: function (e) {
			e.preventDefault();
			
			var self = this;
			var link = $( e.currentTarget ).attr('href');
			var infoPanel = this.scope.find('[data-role="releaseInfo"]');

			// Cancel any current requests
			if( this._ajaxObj && _.isFunction( this._ajaxObj.abort ) ){
				this._ajaxObj.abort();
			}

			// Set panel to loading
			infoPanel
				.css({
					height: infoPanel.height() + 'px'
				})
				.html( $('<div/>').addClass('ipsLoading').css({ height: '100px' }) );

			// Unhighlight all others, then highlight this one
			this.scope.find('[data-releaseID]').removeClass('cRelease_active');
			$( e.currentTarget ).addClass('cRelease_active');

			this._ajaxObj = ips.getAjax()( link, {
				data: {
					rating_submitted: 1
				}
			})
				.done( function (response) {
					var responseContent = $("<div>" + response + "</div>");
					var content = responseContent.find('#elCmsPageWrap');

					infoPanel.html( content ).css({ height: 'auto' });

					$( document ).trigger( 'contentChange', [ infoPanel ] );
				});
		}
	});
}(jQuery, _));

Das ist ein Standard-IPS4-Javascript-Controller; weitere Informationen finden Du in der Controller-Dokumentation.

In unserer Initialisierungsmethode (die automatisch aufgerufen wird, wenn der Controller initialisiert wird), haben wir einen Event-Handler für das Anklicken von Elementen mit dem data-releaseID-Attribut eingerichtet (wenn Du Dich erinnerst, haben wir in unserem Datensatz Elemente mit diesem Attribut angegeben). Wir binden diesen Handler an die showRelease-Methode.

Dann rufen wir die Setup-Methode auf. Die Logik in dieser Methode wählt einen Datensatz aus, der automatisch geladen wird, so dass die Seite beim ersten Laden durch den Benutzer Inhalt enthält. Es wird versucht, einen Datensatz mit dem Attribut data-currentRelease zu finden, aber wenn ein solcher nicht vorhanden ist, wird stattdessen der erste Eintrag in der Liste geladen.

Schließlich gibt es die showRelease-Methode, die die Aufgabe hat, die Datensatzansicht zu laden und anzuzeigen, die dynamisch über AJAX gezogen wird. Dazu suchen wir die relevante URL aus der Datensatzzeile und lösen dann eine AJAX-Anforderung aus. Im fertigen Handler aktualisieren wir das div, das unseren Datensatzinhalt enthält.

Wenn eine Seiten-URL über AJAX aufgerufen wird (unabhängig davon, ob es sich um eine normale Seite oder eine Datenbank handelt), gibt sie nur den Seiteninhalt zurück - sie enthält nicht den kompletten Site Wrapper. Dies macht es etwas einfacher, das dynamische Laden von Seiten zu implementieren. In unserem Fall ist das HTML, das wir benötigen, allerdings noch schmaler - wir wollen nur den Inhalt des Datensatzes, nicht die umgebende Seite von Pages. Aus diesem Grund wählen wir im fertigen Handler nur den Inhalt des #elCmsPageWrap-Elements aus und verwenden diesen als unseren Datensatzinhalt.