Ich bin ziemlich neu in das Konzept der JavaScript-Client-Seite Entwicklung. Ich stoße auf ein Problem, obwohl ich es vielleicht nicht verstehe, wie ich etwas mit dem Bündel von Frameworks erreichen kann.Sammy.js und Knockout.js => Templating ohne Vorlagen?
Ich weiß, ich möchte Knockout für seine reiche Client-Seite Goodies verwenden. Ich möchte Sammy.js auch verwenden, um Routing zuzulassen und Daten an die Knockout-Ansichten weiterzuleiten (ich komme von einem MVC-Hintergrund, wo ich ein Modell mit Daten stopfen, dann Ansicht (Modell) zurückschicke und MVC bindet es schön und gut für mich) .
So, jetzt versuche ich, etwas ähnliche Client-Seite zu tun ...
Hier ist mein Index.HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>The EClassifieds Mobile</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="./scripts/cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/templ.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/sammy.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/sammy.tmpl.js"></script>
<script type="text/javascript" charset="utf-8" src="./services/RouteManager.js"></script>
<script type="text/javascript" charset="utf-8" src="./services/ApplicationManager.js"></script>
<link rel="stylesheet" href="./style/site.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
</head>
<body>
<div id="main">
<h1>HELLO WORLD!</h1>
<!--Sammy should update the content of this div dynamically, creating a SPA (single page application)-->
</div>
</body>
</html>
Hier ist meine Sammy Konfiguration.
(function ($) {
alert('Building Routes');
var app = $.sammy('#main', function() {
this.use('Tmpl', 'html');
this.get('#/', function (context) {
alert('Rendering Partial for Login page');
context.app.swap('Loading...');
this.render("/views/Login.html");
});
});
$(function() {
app.run('#/');
});
})(jQuery);
Hier ist meine login.html
<!--Model File Goes Here -->
<script type="text/javascript" charset="utf-8" src="../models/Login.js"></script>
<fieldset title="Please Login to Begin :">
<div data-role="content" style="padding: 15px">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="txtUsername">
Username
</label>
<input id="txtUsername" data-bind="value: username" placeholder="Stevie" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="txtPassword">
Password
</label>
<input id="txtPassword" data-bind="value: password" placeholder="yep!" value="" type="password" />
</fieldset>
</div>
<a id="btnLogin" data-role="button" data-transition="fade" href="#page1" >
Login
</a>
</div>
<div id="errorText">
<h1></h1>
</div>
<p id="deviceProperties">Loading device properties...</p>
</fieldset>
<script type="text/javascript">
$(document).ready(function() {
ko.applyBindings(new LoginDataModel(0, "Stevie", "theTV", true));
});
</script>
ich auch eine gewisse Art und Weise müssen erhalten die Daten von der sammy zu passieren Handler, um die Ko-Seite. Gibt es einen Weg dies zu tun, oder versuche ich das Unmögliche?
UPDATE 1: Ich würde wirklich gerne in der Lage sein, etwas zu tun wie:
var app = $.sammy('#main', function() {
this.use('Tmpl', 'html');
this.get('#/', function (context) {
alert('Rendering Partial for Login page');
context.app.swap('Loading...');
var data = getLoginData();
this.render("/views/Login.html", data);
});
Sammy tut die gleiche genaue Sache anderes Template-Frameworks, aber ich sehe nicht, wie ich würde die $ -Daten in der Knockout-Ansicht an die von Sammy übergebenen Daten binden.
Ihr Ausgangspunkt Link geht jetzt zu einer Malware-Website. Wie im SO-Artikel http://stackoverflow.com/help/how-to-answer "Links zu externen Ressourcen werden empfohlen, aber bitte fügen Sie Kontext um den Link hinzu, so dass Ihre Mitbenutzer eine Idee haben, was es ist und warum es da ist "Zitieren Sie immer den relevantesten Teil eines wichtigen Links, falls die Zielseite nicht erreichbar ist oder dauerhaft offline geschaltet wird." – AndyJ
Andy J danke für die Identifizierung, der ursprüngliche Link ist gesunken – Ananda