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. 

  • 相关阅读:
    20145231第九周学习笔记
    20145231第八周学习笔记
    20145231《Java程序设计》第三次实验报告
    20145231第七周学习笔记
    20145231《Java程序设计》第二次实验报告
    测试「20200912测试总结」
    题解「Luogu4774 [NOI2018]屠龙勇士」
    总结「斯坦纳树」
    题解「AT1226 電圧」
    题解「AT1983 [AGC001E] BBQ Hard」
  • 原文地址:https://www.cnblogs.com/qijiage/p/4595579.html
Copyright © 2011-2022 走看看