zoukankan      html  css  js  c++  java
  • 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函数可以创建一个可观察的值。

  • 相关阅读:
    C++ Primer 笔记——语句
    C++ Primer 笔记——const 限定符
    C++ Primer 笔记——变量
    C++ Primer 笔记——函数
    C++ Primer 笔记——基本内置类型
    图的遍历算法:DFS、BFS
    python数据结构之图论
    下载文件的协议:HTTP、FTP、P2P
    HTTPS协议
    HTTP协议
  • 原文地址:https://www.cnblogs.com/sundh1981/p/13661181.html
Copyright © 2011-2022 走看看