• Knockout 应用


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

  • 相关阅读:
    centos安装字体
    【C++ Primer | 15】访问控制与继承、继承中的类作用域
    树与二叉树 | 哈夫曼树
    【C++ Primer | 10】泛型算法
    【APUE | 03】文件I/O
    二叉树
    图论算法
    【深度探索C++对象模型 | 02】构造函数语意学
    【APUE | 08】进程控制
    c++重点理解
  • 原文地址:https://www.cnblogs.com/sundh1981/p/13661181.html
Copyright © 2020-2023  润新知