Soy bastante nuevo en el concepto de desarrollo del lado del cliente de JavaScript. Me encuentro con un problema, aunque puede ser que simplemente no entiendo cómo lograr algo con el montón de marcos.Sammy.js and Knockout.js => ¿Templating sin plantillas?
Sé que quiero usar Knockout por sus ricos accesorios del lado del cliente. También quiero usar Sammy.js para permitir el enrutamiento y pasar datos a las vistas de nocaut (vengo de un fondo MVC donde cargo un modelo con datos, luego devuelvo la vista (modelo), y MVC lo vincula muy bien conmigo) .
Así que ahora estoy tratando de hacer algo parecido ... lado del cliente
Aquí es mi 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>
Aquí está mi configuración de Sammy.
(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);
Aquí es mi 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>
También necesito alguna manera de pasar los datos desde el controlador de Sammy obtener, a la página de final. ¿Hay alguna manera de hacer esto o estoy intentando lo imposible?
ACTUALIZACIÓN 1: realmente me gustaría ser capaz de hacer algo como:
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 hace exactamente lo mismo usando otros marcos de plantilla, sin embargo, no veo cómo me vincularía los $ datos en la vista de Knockout con los datos pasados por Sammy.
Su enlace de punto de partida ahora va a un sitio de malware. Según el artículo de SO http://stackoverflow.com/help/how-to-answer "Se alientan los enlaces a recursos externos, pero agregue contexto alrededor del enlace para que los demás usuarios tengan una idea de qué es y por qué está allí . Siempre cite la parte más relevante de un enlace importante, en caso de que el sitio objetivo no esté disponible o esté permanentemente fuera de línea ". – AndyJ
Andy J gracias por identificarme, el enlace original ha bajado – Ananda