很久很久没写博客了,丫的,节操掉一地了,颓废了,惭愧。

  很久很久没有弄 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 -- 前端必备的更多相关文章

  1. 前端必备:FastStoneCapture 和 Licecap

    前端必备:FastStoneCapture 和 Licecap FastStoneCapture这个软件非常小,只有2M多,并且其功能很强大,包括截图,录制视频,量尺,取色等等,对于前端工程师绝对是必 ...

  2. webpack入门--前端必备

    webpack入门--前端必备 什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来 ...

  3. Sublime编辑器 前端 必备插件

    sublime编辑器前端必备插件 下面这一行是Package Control包安装,它是sublime的插件包管理器.新安装的sublime 里没有Package Control,按一下ctrl+~, ...

  4. 前端必备之Node+mysql+ejs模版如何写接口

    前端必备之Node+mysql+ejs模版如何写接口 这星期公司要做一个视频的后台管理系统, 让我用Node+mysql+ejs配合写接口, 周末在家研究了一下, 趁还没来具体需求把研究内容在这里分享 ...

  5. Charles——前端必备模拟后端数据

    Charles--前端必备模拟后端数据 现在都是前后端分离开发了,前端开发者经常会遇到一个问题如何模拟后端数据来进行开发调试,在这里给大家介绍一个前端神器--Charles. 安装 安装就不赘述了,直 ...

  6. 前端必备HTTP技能之HTTP请求头响应头中常用字段详解(转)

    作为一名前端开发人员,肯定少不了要和网络打交道,因为要从服务器端拉取数据,从服务端获取数据最常用的方式还是通过HTTP请求.给服务器发请求的时候有请求头,接受服务器响应的时候有响应头,客户端和服务器端 ...

  7. VSCode 前端必备插件

    VSCode 前端必备插件 Debugger for Chrome 让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试 { "versio ...

  8. Web 前端必备的各种跨域方式汇总

    Web 前端必备的各种跨域方式汇总 跨域方式汇总 同源策略 协议相同 + 域名相同 + 端口相同 https://www.xgqfrms.xyz/index.html https://www.xgqf ...

  9. 前端必备PS技巧

    hai,how is it going?I'm MuQing.I come back.哈哈,最近在英语的路上奋战,小秀一下.又好久没写博客了,实习的生活渐行渐远了,回到学校也终于能够坐下来对很多东西进 ...

随机推荐

  1. android布局1

    第二类:属性值必须为id的引用名“@id/id-name” 仅RelativeLayout中有效    android:layout_below      在某元素的下方     android:la ...

  2. 解决spring mvc 上传报错,Field [] isn't an enum value,Failed to convert value of type 'java.lang.String[]' to required type '

    没有选择附件,但是点击上传按钮的时候会报错. 之前不选择文件,直接上传空文件是可以的,后来不知道改了什么就不行了. 错误信息: -- :: [http--] TRACE org.springframe ...

  3. C++ 性能剖析 (一)

    C++ 性能剖析 (一) 性能问题也不是仅仅用“技术”可以解决的,它往往是架构,测试,假设等综合难题.不过,对于一个工程师来说,必须从小做起,把一些“明显”的小问题解决.否则的话积小成多,千里堤坝,溃 ...

  4. C++学习笔记5——类的继承

    简介: 通过继承联系在以前的类构成一种层次关系.通常在层次关系的根部有一个基类,其他类则直接或间接地从基类继承,这些继承得到的类称为类的派生类. 作用: 1.子类拥有父类的所有成员函数和成员变量. 2 ...

  5. block 高级

    //从后往前传值 声明block属性 //copy 目的是 将栈区的block拷贝一份到堆区 @property(nonatomic,copy)void (^sendValueBlock)(id); ...

  6. 关于 从别人电脑上 高版本的 Xcode上拷贝过来的项目的 不能运行模拟器的 解决方法

    如图 从别人电脑上 拷贝过来的  工程  打开后  点击 iOS  Device  只有  一个选项  没有模拟器.这说明 自己的 Xcode 的版本比 创建这个工程所用的版本低.所以 要睇啊你tar ...

  7. 分析智能卡的ATR格式

    一些例子 NXP 080=========3b f8 T0   Y1 = 0xF(TA1, TB1, TC1, TD1), K = 813 TA1 F = 0x1(Fi = 372, Fmax = 5 ...

  8. 软硬大比拼 硅胶、TPU和PC材质对比

    手机保护壳的材质有很多种,目前保护壳市场上最为常见的就是硅胶.TPU.PC材质了.那么我们不禁要问,PU.硅胶.PC三材质到底有哪些区别呢?普通消费者在购买保护壳的时候能否从外表就能看出保护壳材质?P ...

  9. 高效率dc升壓轉換器 應用技巧談 功率設計

    為便攜式電子設備開發電源電路要求設計工程師通過最大程度地提高功率和降低整個系統的功耗來延長電池使用壽命,這推動器件本身的尺寸變得更小,從而有益于在設計終端產品時獲得更高靈活性.這種設計的最重要元器件之 ...

  10. android 自定义titlebar

    首先,修改标题栏的宽度和背景,在style.xml中添加: <style> <item name="android:background">@drawabl ...