zoukankan      html  css  js  c++  java
  • knockout 初接触

    下午练习写Service的时候,用VS2012新建一个空的MVC4项目,无意中看到在Scripts的目录下除了最常用的JQuery之外,还有一个Knockout的JS库。

    于是上网简单的百度了下,看看这个库主要是用来做什么的,并且尝试写个简单的测试本地测试下运行效果。

    Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。

    MVVM是类似MVC的一种模式,即Model, View 和ViewModel。

    从网上看了下测试代码,写了一个下拉框和清空下拉框的函数。

    Choose a ticket class:
    <select data-bind="options: tickets,
        optionsCaption: 'Choose...',
        optionsText: 'name',
        value: chosenTicket"></select>
    
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
    <script src="~/Scripts/knockout-2.1.0.js"></script>
    
    <script id="ticketTemplate" type="text/x-jquery-tmpl">
        <button data-bind="click: resetTicket">Clear</button>
    </script>
    
    <script type="text/javascript">
        var viewMode = {
            tickets: [
            { name: "Economy", price: 199.95 },
            { name: "Business", price: 499.22 },
            { name: "Firse Class", price: 1199.99 }
            ],
            chosenTicket: ko.observable(),
            resetTicket: function () { this.chosenTicket(null)}
        };
        ko.applyBindings(viewMode);
    </script>

    运行之后的效果如下图,会解析viewModel中的name到下拉列表。

    点击clear按钮的时候会清空下拉框。

    Knockout的使用方式是用data-bind,包括数据绑定和时间绑定,在前台使用viewModel来存储数据。

  • 相关阅读:
    团队冲刺个人总结第二天
    Gym
    Codeforces Round #162 (Div. 2) A~D 题解
    Wormholes 虫洞 BZOJ 1715 spfa判断负环
    修剪草坪 单调队列优化dp BZOJ2442
    没有上司的舞会 树形dp
    餐巾计划问题 费用流
    最小路径覆盖问题 最大流
    [JSOI2007]麻将 模拟 BZOJ1028
    CF702F T-Shirts FHQ Treap
  • 原文地址:https://www.cnblogs.com/fengsui/p/4295858.html
Copyright © 2011-2022 走看看