asp.net-mvc – Sammy.js和Knockout.js =>模板没有模板?
发布时间:2020-12-16 04:19:17 所属栏目:asp.Net 来源:网络整理
导读:我对 javascript客户端开发的概念相当新.我遇到了一个问题,虽然我可能只是不明白如何用框架的混搭来完成某些事情. 我知道我想使用Knockout来为它提供丰富的客户端好东西.我也想使用Sammy.js来允许路由并将数据传递到淘汰视图(我来自MVC背景,我用数据填充模型
我对
javascript客户端开发的概念相当新.我遇到了一个问题,虽然我可能只是不明白如何用框架的混搭来完成某些事情.
我知道我想使用Knockout来为它提供丰富的客户端好东西.我也想使用Sammy.js来允许路由并将数据传递到淘汰视图(我来自MVC背景,我用数据填充模型,然后返回视图(模型),MVC绑定它对我很好) . 所以现在我正在尝试做类似的客户端… 这是我的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> 这是我的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); 这是我的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> 我还需要一些方法将数据从sammy get handler传递到knockout页面.有办法做到这一点,还是我尝试不可能? 更新1: 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使用其他模板框架做了同样的事情,但是,我没有看到如何将Knockout视图中的$data绑定到从Sammy传递的数据. 解决方法
Knockout.js-External-Templates插件将帮助您实现此行为.一个很好的起点将来自这里
编辑:“起点”链接现在转向恶意软件. 甚至约翰帕帕也赞同它here 只有在经常重复使用模板时,上述解决方案才有用.尽可能使用内联模板.内联模板 – 并使用foreach绑定,比从单独的DOM元素(即所谓的命名模板绑定)应用模板快约1/3.有关此here的更多信息 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- asp.net-core – MVC 6 OpenIdConnect
- 如何在ASP.NET MVC中渲染HTML字符串?
- 使用高性能Pipelines构建.NET通讯程序
- 使用ASP.Net和JSON格式化实现jQuery的jgGrid
- 在Asp.net中POST后清除表单
- 展望asp.net core Blazor项目c#编译为原生WebAssembly
- 使用asp.net和vb.net从sql server导出到excel文件?
- asp.net-mvc – Knockout JS发送到MVC 3
- asp.net-mvc – ActionLink后退按钮
- 如何为ASP.NET 5 MVC 6实现NoSQL身份提供程序
推荐文章
站长推荐
- ASP.net C#:如何使用File.ReadLines(fileName).
- ASP.NET自定义错误,除了404错误,
- asp.net-mvc – ASP.NET MVC:路由到URL
- asp.net-mvc – Orchard CMS安装错误?
- asp.net-mvc – 在Mvc ViewBag中检查成员是否存在
- asp.net-mvc – 在部署MVC 2 Web应用程序时要绝对
- 如何使用ASP.NET MVC 6重定向未经授权的用户
- asp.net-web-api – ASP.NET WebApi自定义序列化
- asp.net-core – asp.net核心依赖注入问题 – Ad
- 在asp.net中使用cookie mvc c#
热点阅读