• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] MVVM Patter mit JQuery Mobile

K

Kaktus96

New member
/edit: *Pattern
kkapsner schrieb:
Herzlich willkommen hier im Forum.


tu das - mir fällt jetzt kein Thread zu diesem Thema ein.
Zum Vergrößern anklicken....

Unwichtiges geschwafel Start:

Hallo Leute,

vielen Dank für die Begrüßung :).
Ich bin kompletter Webentwicklung-Neuling aber ausgebildeter Fachinformatiker für Anwendungsentwicklung. Ich habe nun schon länger vor eine kleine App zu entwickeln. Dafür habe ich mich zuerst mit dem Framework Xamarin auseinandergesetzt. Diese Lösung ist sehr aufwendig und daher habe ich mich nach Alternativen umgeschaut. Dabei bin ich schnell auf Phonegap gestoßen. Da das ganze aber dann wie eine normale Website aussieht, habe ich ein wenig gegoogled und stoß schließlich auf jquery mobile um Websiten auch Mobil schön darstellen zu können. Die beiden Dinge möche ich nun kombinieren um eine hübsche App zu erstellen. Dabei möchte ich aber nicht auf das MVVM Pattern verzichten. (Später benötige ich noch ein Backend :S. Da am liebsten Request, Requesthandler und Response)
Nun gibt es in dieser Welt hier sehr viele kleine und auch große Projekte, welche einem das Entwickeln vereinfachen sollen. Das sind aber so viele, dass ich nun euch fragen möchte

(Unwichtiges geschwafel Ende): Wie kann ich am besten eine MVVM Architektur mit Jquery Mobile durchsetzen?
Alternativ kann man das doch sicher auch über eine Scriptsprache die durch nen CGI Interperter ö.ä verarbeitet wird lösen (PHP??)

Vielen dank für kommende Antworten!
LG
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

heute hatte ich etwas Zeit und ich bin einen halben Schritt weiter gekommen. Ich bin auf Knockout.js aufmerksam geworden und habe mir das mal angeschaut.
Insgesamt konnte ich damit jetzt ein MVVM Pattern aufbauen..

Beispiel index.html (View):
HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <script src="knockout.js" type="text/javascript"></script>    
</head>
<body>
    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
	<script src="indexViewModel.js" type="text/javascript"></script>
</body>
</html>

viewModel & Model:
Code: 
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();    
    }, this);

    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

=> Das ist vor 5 Minuten zusammenkopiert worden, also ist das natürlich nicht so wie ich das tatsächlich umsetzten möchte. Jetzt muss ich noch jquery mobile hinzufügen und es irgendwie schaffen "von Seite zu Seite" springen zu können. (Elegant..) Sprich eine andere View inkl. ViewModel aufzurufen.. da wird sich sicher etwas im Knockout Tutorial finden lassen. Das habe ich nämlich noch nicht durch.
 
Zuletzt bearbeitet von einem Moderator:
Knockout ist mal ein sehr sehr geiles Framework, wenn man aus der .NET Sparte kommt und schicke Architekturen gewöhnt ist! :)
Falls mal jemand auf dieses Thema aufmerksam wird:
Das Tutorial von der Entwicklerseite lohnt auf jeden Fall. Wer's trotzdem nicht durcharbeiten möchte, hier die wichtigste Info:

"Important note! Notice that you're not calling ko.applyBindings after loading the data. Many Knockout newcomers make the mistake of trying to re-bind their UI every time they load some data, but that's not useful. There's no reason to re-bind - simply updating your existing viewmodel is enough to make the whole UI update." (Knockout.com, learn.knockoutjs.com, 08.08.2016)

Weiterhin gibt's wohl auch die Möglichkeit ein OR Mapper von Knockout zu nutzen(??) Da bin ich auf jeden Fall noch nicht richtig informiert, aber das schaue ich mir an.
-> Knockout : Mapping
 
So. Nun habe ich das Tutorial durchgearbeitet, aber zum eventuellen OR Mapper (Weiß ich ja noch nicht) bin ich noch nicht gekommen, da ich den Inhalt des Tutorials jetzt "in echt" nachbauen wollte.
Fix jquery.js, knockout.js und sammy.js heruntergeladen und den Quellcode aus dem Tut kopiert.

index.html
HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>   
	<script src="knockout.js" type="text/javascript"></script>
	<script src="sammy.js" type="text/javascript"></script>
	<script src="jquery.js" type="text/javascript"></script>
</head>

<body>
	<!-- Folders -->
	<ul class="folders" data-bind="foreach: folders">
		<li data-bind="text: $data,
					   css: { selected: $data == $root.chosenFolderId() },
					   click: $root.goToFolder"></li>
	</ul>

	<!-- Mails grid -->
	<table class="mails" data-bind="with: chosenFolderData">
		<thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
		<tbody data-bind="foreach: mails">
			<tr data-bind="click: $root.goToMail">
				<td data-bind="text: from"></td>
				<td data-bind="text: to"></td>
				<td data-bind="text: subject"></td>
				<td data-bind="text: date"></td>
			</tr>     
		</tbody>
	</table>

	<!-- Chosen mail -->
	<div class="viewMail" data-bind="with: chosenMailData">
		<div class="mailInfo">
			<h1 data-bind="text: subject"></h1>
			<p><label>From</label>: <span data-bind="text: from"></span></p>
			<p><label>To</label>: <span data-bind="text: to"></span></p>
			<p><label>Date</label>: <span data-bind="text: date"></span></p>
		</div>
		<p class="message" data-bind="html: messageContent" />
	</div>

	<script src="indexViewModel.js" type="text/javascript"></script>	
</body>
</html>

indexViewModel.js
HTML: 
function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();
    self.chosenFolderData = ko.observable();
    self.chosenMailData = ko.observable();

    // Behaviours    
    self.goToFolder = function(folder) { location.hash = folder };
    self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id };

    // Client-side routes    
    Sammy(function() {
        this.get('#:folder', function() {
            self.chosenFolderId(this.params.folder);
            self.chosenMailData(null);
            $.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
        });

        this.get('#:folder/:mailId', function() {
            self.chosenFolderId(this.params.folder);
            self.chosenFolderData(null);
            $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
        });
    
        this.get('', function() { this.app.runRoute('get', '#Inbox') });
    }).run();    
};

ko.applyBindings(new WebmailViewModel());

Jetzt hat sich da leider ein Fehler eingeschlichen den ich nicht beheben kann. Irgendwie habe ich das HTML Dokument falsch aufgesetzt, da ich in der Firefox Entwicklerkonsole folgende Fehler gemeldet kriege:

ReferenceError: jQuery is not defined
<anonym>
sammy.js:5
<anonym>
sammy.js:5
sammy.js:5:95

ReferenceError: Sammy is not defined
WebmailViewModel()
indexViewModel.js:14
<anonym>

Weiterhin fehlt mir natürlich das jquery ui css.. das ist mir bewusst - kommt später.. für den Test. Insgesamt wird das auch nicht in die App übernommen, aber da ihc gerade diesen Thread auf habe.. .
 
Code: 
<script src="jquery.js" type="text/javascript"></script>
<script src="sammy.js" type="text/javascript"></script>
<script src="knockout.js" type="text/javascript"></script>
 
tsseh schrieb:
Code: 
<script src="jquery.js" type="text/javascript"></script>
<script src="sammy.js" type="text/javascript"></script>
<script src="knockout.js" type="text/javascript"></script>
Zum Vergrößern anklicken....
Sowas bitte lassen, das hilft keinen Anfänger und verbraucht im Endeffekt nur wertvollen Plattenspeicher... (Kommentarlos Zitieren)
Was meinst du damit? Die JavaScript Dateien sind im Header eingebunden, mein ViewModel JavaScript wird anschließend im Body geladen und ausgeführt. Demnach müssten jquery, sammy und knockout vorhanden sein, bevor damit gearbeitet wird. Wo hat sich der Fehler eingeschlichen?
Mir fällt keine Methode ein um über die Document Ready Funktion mein ViewModel JS laden zu können.
 
Hallo zusammen,

ich bin nun wieder etwas weiter in meiner Ausgangsoberfläche/View gekommen. Nun ist der Punkt erreicht wo ich dem Benutzer eine andere View anzeigen lassen möchte. Mit Sammy.js konnte dies ja ungefähr im Tutorial erreicht werden, indem der Content einer Div gesetzt wurde. Wie kann ich das ganze elegant lösen, so das ich für jede View und ViewModel eine einzige Datei habe (.html / .js) und weiterhin dann nur das JS vom aktuellen ViewModel aktiv ist? Dabei sollte natürlich auch das zurück navigieren mit dem Zurückknopf funktionieren.

Über Tipps freue ich mich!

P.S: Mit Google komme ich nicht so weit
 
du erzeugst ein model mit mehreren untermodels und bindest in dem oberen model (dein mainframe) die untermodelle mit with
das ist der vorteil von angular, da ist das alles im framework
 
Danke tsseh! Ich schaue mir das später mal an :)
Ich fasse zusammen: knockout.js, jquery.js, jquery ui und angular.js sollten verwendet werden und sammy.js fliegt dann raus?
 
Kaktus96 schrieb:
Ich fasse zusammen: knockout.js, jquery.js, jquery ui und angular.js sollten verwendet werden und sammy.js fliegt dann raus?
Zum Vergrößern anklicken....
wenn du mich fragst, würde ich dir zu angular.js raten.
mit knockout.js, jquery.js, jquery ui und sammy.js hast du annähernd das, was angular.js schon alles mitbringt. und selbst dann ist der umgang mit angular.js durchgängiger, da alles in diesem einen framework schon enthalten ist. und angular.js bietet noch viel mehr, z.b. mehrsprachigkeit. angular.js ist modular aufgebaut und es gibt auch fremd module, die z.b. angulareigene wieder ersetzen. das erwähnte mobile-angular-ui ersetzt z.b. das angular-ui.
was du mit sammy.js machst ist bei angular das angular-route.js modul. ich ersetze das meistens mit dem ui-router
für jquery bringt angular einen eigenen wrapper mit der standartmäßig eine jquery-light-implementierung mit dem wichtigsten jquery-funktionen mitbringt. wenn du jquery einbindest, nutzt der wrapper deine eingebundene jquery-version.
auch sonst ist manches einfacher. du müsstest dein view-template selbst laden. angular bringt von haus aus einen loader für templates mit.
davon, daß der model-code schon eingebunden ist geht auch angular standardmäßig aus. aber du kannst zu einer route nicht nur das template laden lassen, sondern auch zusätzliche abhängigkeiten angeben (eigenschaft resolve). sind dort promises eingetragen wird gewartet bis diese aufgelöst wurden ehe der controller und damit der view angelegt werden. so kannst du dort ganz einfach deinen code nachladen, z.b. über require.js.

so in etwa sieht das mit knockout aus
Anhang anzeigen test.zip
ich hab das nur schnell aus der ducu zusammenkopiert. hinter dem model-loader lag da nur eine dummy-implementierung die das model nicht wirklich lädt, sondern einfach eins anlegt. das sollte auch mit require.js ersetzt werden zum laden des codes. routing mit sammy.js hab ich mal weggelassen und dafür links eingebaut, sollte dann bei dir über routing gelöst werden.

- - - Aktualisiert - - -

tsseh schrieb:
was du mit sammy.js machst ist bei angular das angular-route.js modul. ich ersetze das meistens mit dem ui-router
Zum Vergrößern anklicken....
ich seh gerade, der link auf heise stimmt nicht, die haben auch den ui-router genommen obwohl
<script src="~/Scripts/angular-route.js"></script>
eingebunden wurde und nicht
<script src="lib/angular-ui-router.js"></script>
 
Danke für deine ausführlich Antwort. So wie im test.zip hatte ich mir das vorgestellt. Wenn du mir allerdings angular.js mit mobile angular ui ans Herz legst, werde ich mir das mal anschauen.
 
Ich steige da ehrlich gesagt nicht durch @tseeh das ist etweder grotten schlecht dokumentiert oder ich bin zu doof.
1. Getting Started (Getting Started | Mobile Angular UI)
- Ich brauche gulp und git (Gulp kann man sich noch denken, git kommt aus einer Fehlermeldung..)
- "You can initialize your Angular application declaring mobile-angular-ui as a dependence." Wo denn?..

Schließlich habe ich mich dazu entschieden, einfach mal zu schauen wie denn die Standartseite ausschaut. Also fix "phonegap serve" eingetippt und siehe da: Phonegap erzeugt (wenn ich mich nicht irre) eine neue Ordnerstruktur und startet die einfach. Dann sollten die auch im Getting Started erwähnen wie man das Projekt testet bzw. startet..

Kennt jemand ein frustfreies Tutorial zu mobile angular ui?

//edit: Lösung zum starten http://stackoverflow.com/a/29528972
 
Zuletzt bearbeitet:
Kaktus96 schrieb:
Ich steige da ehrlich gesagt nicht durch
Zum Vergrößern anklicken....
du fängst vermutlich an der falschen stelle an.
dort wird wieder ein buildsystem verwendet.
standard ist da node.js.
nodejs bringt npm mit, einem packetmanager.
mit npm selbst kann man eigentlich schon alles erledigen. meist wird aber noch bower genutzt als packetmanager für client-packete, da npm und nodejs ja eher die serverseite bedienen.
gulp wird in deinem beispiel als eigentliches buildsystem genutzt.

auf die ganzen sachen kannst du verzichten und dir die entsprechenden teile auch selbst runterladen und einbinden. hier im beispiel (hier etwas besser) wird folgendes verwendet und automatisch runtergeladen:
"angular": "1.x": auf download klicken(die 1er version)
"angular-route": "1.x": ist oben mit dabei
"mobile-angular-ui": "1.2.x":auf download klicken
"font-awesome": "4.2":auf download klicken
"bootstrap": "3.x":auf download klicken
zusätzlich werden noch die script-files von hier kopiert und eine vorlage erzeugt mit der man anfangen kann.
die kannst du aber auch selbst schreiben.
zum einstieg ist das beispiel hier allerdings nicht schlecht, um das zu nutzen einfach nodejs installieren und hier weitermachen.
dann hast du einen anfang. weiter solltest du dir zu angular mal etwas durchlesen.
mobileangularui bringt dann nur noch komponenten hinzu.
 
Hallo,

ich hatte leider keine Zeit für dieses Projekt (oder überhaupt irgendwas) :/. Die letzten Tage konnte ich allerdings den gesamten codeschool Kurs Shaping up with Angular.js durcharbeiten. Dieser war auf jeden Fall sehr nützlich!
Nun wollte ich die Problematik vom Post #18 lösen. Ich habe mich entschlossen das in Form einer neuen Application zu versuchen.
Also fix diese URL geöffnet:
tsseh schrieb:
(...)
(hier etwas besser) (...)
Zum Vergrößern anklicken....
Erste Ernüchterung bei dem Befehl phonegap run android. Hier musste ich diverse Pakete nachinstallieren (=> npm install -g <fehlendes Paket>) das hat alles soweit geklappt.
Leider ist dann kein Emulator gestartet, also wollte ich mir das ganze wieder im Browser anzeigen lassen. => phonegap server => nix
also: http-server -o => auch nur eine "landing Page vom Server" und nicht das erwartete Welcome to Weather App.

Weiter war ich vor 2 1/2 Wochen auch nicht. Kann mir da jemand behilflich sein?
Hhmmm..
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben