jsmart 前端绑定案例

前台绑定jsmart是一种不错的选择。之前在项目中经常用到。最近涉足部分后端领域,jsmart用的相对少了一些,主要是因为他要引用一个文件,还要写模板,在简单的项目中,就直接用js绑定了,只有在非常复杂的前端绑定中才使用。

现在对其整理一下,以免后面忘记:

首先要引入jsmart文件

<script src="js/jsmart.js" type="text/javascript"></script>

其次,用ajax等调用后端接口,返回json数据,在返回数据中。。。如下:

js:

$.ajax({
     url:"",
    datatype:"json",
   type:"get",
   success:function(data,status){
			var tpl = new jSmart(document.getElementById('myrecord').innerHTML);
			var res = tpl.fetch(data);
			$("#recordlist").html(res);
   }
})

模板:

<script id="myrecord" type="text/x-jsmart-tmpl">

if语句:
					{if ($result.accountstate == 1)}
						<a href="javascript:setaccountstate(0);">我要下班</a>
					{else}
						<a href="javascript:setaccountstate(1);">我要上班</a>
					{/if}

循环语句:
 {foreach  $replies as $i=>$reply}
{/foreach}

</script>

html

                <div class="ask_detail" id="recordlist">
                    <img src="/images/waiting.gif" />
                </div>

jsmart demo下载

jsmart 前端绑定案例

时间: 2024-10-10 09:16:49

jsmart 前端绑定案例的相关文章

以用户为中心的前端设计案例剖析

WEB前端设计的最终目标是打造用户喜爱的产品,属于产品设计的范畴.所以一切设计要以用户为出发点,追求最佳的用户体验. 一.banner的设计 在WEB项目设计中,我们经常会有banner设计需求,一般而言首屏Banner及其相关区域也是整个网页设计中非常重要的部分. 优化前: 优化后: 优化前: 1.优化前网页首屏图片自动切换交互方式之外,用户可以点击圆点按钮手动切换图片.但考虑到图片本身的展示空间和效果,圆点按钮设计的比较小,造成用户点击该按钮时不方便. 2.banner切换图片时,会存在图片

jquery 事件绑定案例

效果图公如下 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv

炎炎夏日,走入美妙的前端设计案例

1.  嘎嘎夏天到了!最近同事分享我一个案例,说这效果不错,看看我能不能实现 ( 鄙人后台程序员,热爱前端,前端是女人的外貌; 后台是女人的内涵) 我们先从外貌说起,看原始案例的效果          外貌看起来 很简洁,主题很明确,效果也很流畅,还算比较炫吧,我一下就喜欢她了!  刚开始我以为她的内涵可能是css3居多,其实不然是css居多 /-----------------------------------骚骚的分割线-----------------------------------

Anjular+Bootstrap前端开发案例实战

我们将利用Angularjs 和 Bootstrap,开发一个前端应用实例,通过这一次简单的项目实战,引领大家进入AngularJS前端开发的殿堂,并向大家介绍一下几个知识点: MVC 基础,通过项目实例,让大家初步体会MVC设计模式的应用. 构建我们第一个AngularJS应用,通过一个实际用例的开发,大家可以对前端开发获得一定的感性认识. 初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller. 初步了解AngularJS的Scope对象的

前端开发案例:【flex】完美页脚

用flex布局来实现的话,就是把"三列布局"给放倒.三列布局是水平方向排列,因此需要指明容器宽度.放倒以后需要指明高度,这样在中间内容不够的情况下,自动拉伸中间部分,能保持页脚始终在页面下方.但是由于文档高度可以是超过视口高度的,因此需要指明min-height,而不是height.#header#main#footer<style>div:nth-child(1),div:nth-child(3){background:gray;height:100px;}div:nth

ASP.net C# EVal关于前端绑定

好久没有用过asp.net做网站,今天碰到一个小问题,是关于将数据绑定在前端页面,带有一些判断,一时忘了怎么写 1 <bll:TemplateField HeaderText="流输入模式" SortExpression="Channel.StreamInputMode" IsOptional="true" DefaultSortDirection="Descending"> 2 <ItemTemplate&

web前端小白案例,爱新鲜抽屉式特效

知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,动态布局,盒子模型,jquery类库调用,JS特效编写,JS编程思维等. 对前端感兴趣或者正在学习web前端的小伙伴可以来前端群:189394454,每天都会有干货分享.html代码: <div id="box"> <div class="item"> <img src="images/1.jpg" alt="美女" width

web前端实用案例-开发饿了么LBS移动地图点餐系统

知识点:html/css,标签运用.样式讲解.静态开发布局.行业标准.JS基础.if判断.jq方法 Dom操作.逻辑思维. html代码: <div class="top"> <div class="t-header"> <div class="t-logo"> <a href="#"> <img src="images/logo.png" alt=&q

前端js案例

系统登录首页常用案例: <body class="signin" > <audio src="/imgUpload/music.mp3" autoplay="true" loop="0"></audio> <!--背景音乐 --> <div class="signinpanel" id="signinpanel"> <di