Teilansicht in nwjs Anwendung

Ich habe die folgende HTML-Struktur in meinem NW.js appTeilansicht in nwjs Anwendung

<div id="nav-header"> 
    <!-- bunch of links --> 
</div> 
<div id="content"></div> 
<div id="footer"></div>

Ich versuche, einen Weg zu finden, „dynamisch ändern“ oder „Last von einer anderen HTML-Datei“ content div , wenn Benutzer auf einen Link in #nav-header klicken. Ich weiß, dass in Web-Apps dies mit Ajax gemacht wird, aber ich habe keine Ahnung, wie man das in der NW.js Desktop-App macht, und kann keine Hinweise finden, wie es geht.

Kann mir jemand dabei helfen?

Quelle

2016-03-22 Martin Jeremic

Sie können es tun, wie Sie es im Internet tun würden. Sie können Ajax verwenden und eine lokale Datei aufrufen, wäre AngularJS eine einfache Lösung zu implementieren.

Zum Beispiel:

Projektstruktur:

package.json

index.html

page1.html

index.html

<html ng-app> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script> 
</head> 
<body ng-init="page = 'page1.html'"> <!-- Default page --> 
    <div id="nav-header"> 
    <nav> 
     <a ng-click="page = 'page1.html'">Link 1</a> 
     <a ng-click="page = 'page2.html'">Link 2</a> 
     <a ng-click="page = 'page3.html'">Link 3</a> 
    </nav> 
    </div> 
    <div id="content" ng-include="page"></div> 
    <div id="footer"></div> 
</body> 
</html>

page1.html

<div>Hello World</div>

Natürlich, wenn Sie mit Winkel gonna go sind empfehle ich Ihnen einen Router wie die Angular UI Router verwenden, aber wie Sie sehen können Sie können dies mit fast jeder anderen Technologie tun, die Sie wissen, die im Web funktioniert, NW.js ist immer noch Chrom unter der Haube.

Quelle

2016-03-29 09:34:17 dcohenb

Antwort

Verwandte Themen