Knockout 应用

标签：erro   cat   ati   调用   razor   标签   属性表   指示   大量   

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函数可以创建一个可观察的值。

Knockout 应用

标签：erro   cat   ati   调用   razor   标签   属性表   指示   大量   

原文地址：https://www.cnblogs.com/sundh1981/p/13661181.html