knockout --- foreach -- 前端必备
很久很久没写博客了,丫的,节操掉一地了,颓废了,惭愧。
很久很久没有弄 knouckout.js 了,今天重新操作,蛋疼啊,忘记得差不多了,于是只好硬着头皮再去看官网,于是,feel慢慢回来了。
本来不打算用 knouckout 的了,但是人都是懒惰的,况且我一直信奉,不懂偷懒的程序员不是好的程序员!
如果不偷懒,就写一大堆的js,以后维护也是很痛苦的。。。
这里不讨论基本语法什么的,官网上一堆堆的,亲们自己去找吧~ 官网
另外,想打算开个一系列的 knouckout,好好总结自己的所学,解放众多的那些做后端又要做前端的 程序猿,谁要看,给我32个赞,就开始写。开玩笑了,没有拉广告的嫌疑,等项目告一段落了就开始着手写了,不过也已经有人写了,我希望写点不同的。
这里是汤姆大叔的:猛搓我
看效果图:

1.前端代码:
<div class="modal-body" data-bind="foreach: job">
<div> <div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse"
data-bind="text:title" data-parent="#accordion"
href="#collapseOne"> </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body" data-bind="html:content"></div>
</div>
</div>
</div>
</div> </div>
2.js
var viewModel = {
job: ko.observableArray([ ])
};
ko.applyBindings(viewModel);
3.ajax里传值回来后处理:
viewModel.job(j);
OK,以上代码搞定了!本来要很多js代码写的循环,现在在 knockout 的帮助下,一切都变得美好了!
犯过的错误:
1.不能重复绑定同一个元素,因为每次ajax后都会重新执行代码,代码如下(是该错误的代码):
ko.applyBindings({
job : j,//这里的j是我的ajax 返回的 json数组
});
2.基于以上错误,想到了清除绑定,但是结果就是,每次ajax请求,数据都会翻倍,比如说:我原先只有3条记录的,但是ajax后就变成6条记录了,显然不是我想要的,代码如下:
ko.cleanNode(document.body);
ko.applyBindings({
job : j,
});
解决方案在一开始的时候就已经有了,以此谨记,另外,最近得恶补 English 了,发现看 English 少了以前的感觉了。
欢迎拍砖,转载请标明出处!
有问题可以请教,本人QQ:651936145,请说明备注:knockout 探讨。
knockout --- foreach -- 前端必备的更多相关文章
- 前端必备:FastStoneCapture 和 Licecap
前端必备:FastStoneCapture 和 Licecap FastStoneCapture这个软件非常小,只有2M多,并且其功能很强大,包括截图,录制视频,量尺,取色等等,对于前端工程师绝对是必 ...
- webpack入门--前端必备
webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来 ...
- Sublime编辑器 前端 必备插件
sublime编辑器前端必备插件 下面这一行是Package Control包安装,它是sublime的插件包管理器.新安装的sublime 里没有Package Control,按一下ctrl+~, ...
- 前端必备之Node+mysql+ejs模版如何写接口
前端必备之Node+mysql+ejs模版如何写接口 这星期公司要做一个视频的后台管理系统, 让我用Node+mysql+ejs配合写接口, 周末在家研究了一下, 趁还没来具体需求把研究内容在这里分享 ...
- Charles——前端必备模拟后端数据
Charles--前端必备模拟后端数据 现在都是前后端分离开发了,前端开发者经常会遇到一个问题如何模拟后端数据来进行开发调试,在这里给大家介绍一个前端神器--Charles. 安装 安装就不赘述了,直 ...
- 前端必备HTTP技能之HTTP请求头响应头中常用字段详解(转)
作为一名前端开发人员,肯定少不了要和网络打交道,因为要从服务器端拉取数据,从服务端获取数据最常用的方式还是通过HTTP请求.给服务器发请求的时候有请求头,接受服务器响应的时候有响应头,客户端和服务器端 ...
- VSCode 前端必备插件
VSCode 前端必备插件 Debugger for Chrome 让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试 { "versio ...
- Web 前端必备的各种跨域方式汇总
Web 前端必备的各种跨域方式汇总 跨域方式汇总 同源策略 协议相同 + 域名相同 + 端口相同 https://www.xgqfrms.xyz/index.html https://www.xgqf ...
- 前端必备PS技巧
hai,how is it going?I'm MuQing.I come back.哈哈,最近在英语的路上奋战,小秀一下.又好久没写博客了,实习的生活渐行渐远了,回到学校也终于能够坐下来对很多东西进 ...
随机推荐
- 使用Jquery解析Json
利用原生JSON对象,将对象转为字符串 [javascript] view plaincopy var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; j ...
- Eclipse代码注释模板修改
/** * @ClassName: ${type_name} * @author: <font color="red"><b>ZF</b>< ...
- 自动化构建工具gulp
1.优点 1.1 易于使用 通过代码优于配置的策略,gulp让简单的任务简单,复杂的任务可管理 1.2 构建快速 利用node.js流的威力,你可以快速构建项目并减少频繁的IO操作 1.3 插件高质 ...
- 弹出层iframe链接设置
jQuery 比较方便就是创建删除了,所以创建一个弹出层就是当点击div的时候创建一个新的div利用固定位fixed(与浏览器窗口有关)和z-index覆盖body 并利用opacity设置其透明度产 ...
- JS之路——浏览器window对象
window对象的方法 window.alert(msg) window.close() window.print() var a = window.setIntval(function,毫秒) // ...
- 粗看C#委托
C#的好多定义跟C艹不太相同,先来分析一下“委托”. 1. 委托的定义: 委托,可以认为是类型安全的函数指针,类型安全就是指明确定义了返回类型与参数类型,在C#代码编译时就能够确保指针传参时的安全性. ...
- jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案
jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...
- android 休眠唤醒机制分析(一) — wake_lock
本文转自:http://blog.csdn.net/g_salamander/article/details/7978772 Android的休眠唤醒主要基于wake_lock机制,只要系统中存在任一 ...
- ExtJS5_主界面上加入顶部和底部区域
为主界面加一个顶部区域和底部区域.一个管理系统的界面可以粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状态部分. 在增加这二个区域之前,我们先在MainModel.js中加入一些数据. Ex ...
- 调用系统API还是很高效的,不必担心性能
代码如下: void MainWindow::on_pushButton_2_clicked() { QTime total; total.start(); ; ; i<=*; i++) { Q ...