asp.net mvc - Sammy.js y Knockout.js=> Templating sin plantillas?
asp.net-mvc (2)
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.
Sé que quiero usar Knockout porque es rico en regalos 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 similar al lado del cliente ...
Aquí está 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 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í está 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 del controlador de obtención de sammy a la página eliminatoria. ¿Hay alguna manera de hacer esto o estoy intentando lo imposible?
ACTUALIZACIÓN 1: Me encantaría poder 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 vincularía los $ datos en la vista de Knockout con los datos que pasó de Sammy.
No estoy seguro si vio esto, pero el tutorial de webmail en el sitio web de knockoutjs usa sammy.js para el enrutamiento:
http://learn.knockoutjs.com/#/?tutorial=webmail
Aquí hay un enlace al producto final (para que pueda ver el código fuente si no desea seguir todo el tutorial) http://learn.knockoutjs.com/WebmailExampleStandalone.html
el complemento Knockout.js-External-Templates lo ayudará a lograr este comportamiento. Un buen punto de partida será desde aquí EDITAR: El enlace de "punto de partida" ahora va al malware.
Incluso John Papa lo respalda aquí
La solución anterior es útil solo cuando reutiliza sus plantillas con frecuencia. Use plantillas en línea siempre que sea posible. La creación de plantillas en línea - y el uso de la función de enlace foreach, es aproximadamente 1/3 más rápido que la aplicación de un elemento DOM por separado, el denominado enlace de plantilla con nombre. Más información sobre esto aquí