zoukankan      html  css  js  c++  java
  • KnockoutJS

    1. 在Table中添加一条新的item,并绑定数据时,按钮的绑定事件应该这样写:

    HTML:

    <table id="tblCountryList" border="1" class="tableStyle">
                <thead>
                    <tr>
                        <th>Country</th>
                        <th>State</th>
                    </tr>
                </thead>
                <!-- Iterating through every list item using foreach of KO -->
                <tbody data-bind="foreach: Countries">
                    <tr>
                        <td><input data-bind="value: CountryName" /></td>
                        <td><input data-bind="value: StateName" /></td>
                    </tr>
                </tbody>
            </table>
            <br />
            <button data-bind="click: AddCountries.bind($data,'', '', true)">Add State</button>

    JS:

      $(document).ready(function(){
            var completeCountryList = new CountryListViewModel();
             var cityArray = [["Beijing", "China"],["New York","US"],["Tokyo","Japan"]];
             $.each(cityArray, function(index, item){
                 completeCountryList.AddCountries(item[0], item[1], false);
             });
            
            ko.applyBindings(completeCountryList);
        });
        //class for saving the countries and their states
        function CountryList(countryName, stateName, isUpdated) {
            var self = this;
            self.CountryName = countryName;
            self.StateName = stateName;
            //IsUpdated is just to keep tab of rows that are added/removed from the table. This is not a SP column
            self.IsUpdated = isUpdated;
        }
         
        //View Model to combine data from list into the format which view expects
        function CountryListViewModel() {
            var self = this;
            self.Countries = ko.observableArray([]);
            self.AddCountries = function (countryName, stateName, isUpdated) {
                self.Countries.push(new CountryList(countryName, stateName, isUpdated));
                //hide success message
                $("#success").hide();
            }
      }

    2. 

  • 相关阅读:
    day30 python类的继承,抽象类等
    20170702-变量说明,静态方法,类方法区别,断点调试,fork,yield协程,进程,动态添加属性等。。
    day29 面向对象入门
    day28 import,from * import *,__name__
    day27 模块:正则re, configparser, subprocess
    day26 re正则表达式
    MD5的学习与练习
    HBase
    Struts13---Ognl
    Struts12---文件的下载
  • 原文地址:https://www.cnblogs.com/qijiage/p/4595579.html
Copyright © 2011-2022 走看看