1.安装Knockout
install-package jquery -version 1.10.2 //安装jQuery
install-package bootstrap -version 3.0.0 //安装bootstrap
install-package knockoutjs -version 3.0.0 //安装knockoutjs
在布局器中定义脚本片段:
@RenderSection("Scripts") 在视图中通过@section Scripts{ 在此处定义javascript 脚本 }
@RenderSection("Body") 在视图中通过 @section Body{ 在此处定义Body内容}
引用库文件
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.0.0.js"></script>
@section Scripts{
<script>
var model={reservations:ko.observableArray(),
editor: {
name: ko.observable(""),
location: ko.observable("")
}
} //为js定义一个数组变量,之所以用ko.observableArray定义是因为该对象具有数据变化通知能力,就如WPF中的ObservableCollection
</script>
}
Knockout是通过数据绑定(Data Binding)将数据模型中的变化运用于HTML元素。
例如:
<tbody data-bind="foreach:model.reservations">
<tr>
<td data-bind="text:ReservationId"></td>
<td><button data-bind="click:removeItem">删除 </td>
</tr>
</tbody>
Knockout绑定用data-bind 标签属性表示,而且有大量可用的绑定,该视图中使用了其中三个。
其语法格式:
data-bind="type:expression"
data-bind="<类型>:<表达式>"
上面三个绑定的“类型”分别是 foreach、text 、click
其中这里的data-bind="foreach:model.reservations" 和Razor中的@foreach(var item in list)
功能一样,如果使用vue,则合 v-for 功能一样。
Knockout将插入foreach 绑定所处理的当前对象的ClientName属性值,这与之前所使用的Razor表达式@Model.ClientName的效果相同
Click指示符有所不同,他会在所运用的元素上,为click事件建立一个事件处理程序。你不一定要使用Knockout来建立事件,但这种click绑定是与其他绑定集成在一起的,而且在运用该绑定时。foreach绑定所处理的数据对象,会被传递给你说指定的时间出发时要调用的函数。这样就不用考虑用属性来隐性传递参数了。这个对象就是removeItem函数能够定义一个参数,以接收一个Reservation对象(或该对象的任意javascript事务)的原因。
Knockout绑定不是自动执行的,因此需要借助jQuery的加载器
$(document).ready(funciton(){
getAllItems();
ko.applyBindings(model);
});
我们用过ajax的都知道,其语法如下:
$.ajax(
{
type:"post"
url:"",
data:{},
async:true,
success:function(data){}
error:function(reqestdata,repData){}
}
);
ko.observable函数可以创建一个可观察的值。