2013-05-01 142 views
1

我使用Knockout来允许将数据输入网页的网格中。我很努力在ajax调用返回后更新特定行。如何在KnockoutJS中调用ajax后更新数组中的特定元素

这里的的jsfiddle

http://jsfiddle.net/BbFXC/

我从小提琴取出Ajax调用,但问题是一样的。我正努力从ajax调用中传回的数据更新特定的行可观察数组。我知道你可以从服务器返回的数据中绑定数组,但是由于这个项目的复杂性 - 这很难做到。

我希望能够在数据恢复时更新状态为保存/错误。

感谢任何帮助。

谢谢。

下面的代码:

<form action="/" class="main-form" method="post"> <div id="main-buttons"> 
     <button class="btn btn-mini" data-bind="click: addRow, enable: rows().length < 10">Add Row</button> 
     <button class="btn btn-mini btn-primary" data-bind="click: saveRows">Save</button> 
    </div> 
    <table id="affiliate-table" class="table table-condensed"> 
     <thead> 
      <tr> 
       <th style="width: 40px;"></th> 
       <th style="width: 40px;"></th> 
        <th> 
          <a href="#" class="required" data-toggle="tooltip" data-placement="top" data-original-title="Affiliate">WorkCountryCode *</a> 
        </th> 
        <th> 
          <a href="#" class="required" data-toggle="tooltip" data-placement="top" data-original-title="Cost Centre">ReferenceNumber *</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Title">Title</a> 
        </th> 
        <th> 
          <a href="#" class="required" data-toggle="tooltip" data-placement="top" data-original-title="Please specify attendee type">attendee_type *</a> 
        </th> 
        <th> 
          <a href="#" class="required" data-toggle="tooltip" data-placement="top" data-original-title="English/badge first name">FirstName *</a> 
        </th> 
        <th> 
          <a href="#" class="required" data-toggle="tooltip" data-placement="top" data-original-title="English/badge last name">LastName *</a> 
        </th> 
        <th> 
          <a href="#" class="required" data-toggle="tooltip" data-placement="top" data-original-title="Position">JobTitle *</a> 
        </th> 
        <th> 
          <a href="#" class="required" data-toggle="tooltip" data-placement="top" data-original-title="Institution/Hospital">Enterprise *</a> 
        </th> 
        <th> 
          <a href="#" class="required" data-toggle="tooltip" data-placement="top" data-original-title="City">WorkCity *</a> 
        </th> 
        <th> 
          <a href="#" class="required" data-toggle="tooltip" data-placement="top" data-original-title="Affiliate email address (for confirmation)">WorkEmail *</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Delegate email address">AlternateEmail</a> 
        </th> 
        <th> 
          <a href="#" class="required" data-toggle="tooltip" data-placement="top" data-original-title="Tel number (with country code)">WorkPhone *</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Please give arrival flight number e.g. BA 123">arrival_flight_number</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Travelling FROM">arrival_flight_travelling_from</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Travelling VIA (if applicable)">affiliate_via_arr</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Arrival TO">arrival_flight_travelling_to</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Please give departure flight number e.g. BA 123">departure_flight_number</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Travelling FROM">departure_flight_travelling_from</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Travelling VIA (if applicable)">affiliate_via_dept</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Travelling TO">departure_flight_travelling_to</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Please specify if a congress registration is required">affiliate_congress_registration</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Special dietary requirements?">aff_dietary</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Please specify any special requirements or additional dietary needs e.g. Wheelchair access">special_requirements</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Emergency contact name">EmergencyContactFirstName</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Emergency contact phone number">EmergencyContactDayPhone</a> 
        </th> 
        <th> 
          <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Relationship to emergency contact">EmergencyContactRelationship</a> 
        </th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: rows"> 

      <tr> 
       <td> 
        <span class="label">Unsaved</span> 
       </td> 
       <td> 
        <ul class="row-actions"> 
         <li><a href="#" data-bind="click: $root.removeRow">Remove</a></li> 
         <li><a href="#" data-bind="click: $root.copyRow">Copy</a></li> 
        </ul> 
       </td> 
          <td><select data-bind="options: $root.WorkCountryCodeDD, optionsValue: 'opValue', value: WorkCountryCode, optionsText: 'opName'"></select></td> 
<td><input data-bind="value: ReferenceNumber" /></td> 
          <td><select data-bind="options: $root.TitleDD, optionsValue: 'opValue', value: Title, optionsText: 'opName'"></select></td> 
          <td><select data-bind="options: $root.attendee_typeDD, optionsValue: 'opValue', value: attendee_type, optionsText: 'opName'"></select></td> 
<td><input data-bind="value: FirstName" /></td> 
<td><input data-bind="value: LastName" /></td> 
<td><input data-bind="value: JobTitle" /></td> 
<td><input data-bind="value: Enterprise" /></td> 
<td><input data-bind="value: WorkCity" /></td> 
<td><input data-bind="value: WorkEmail" /></td> 
<td><input data-bind="value: AlternateEmail" /></td> 
<td><input data-bind="value: WorkPhone" /></td> 
<td><input data-bind="value: arrival_flight_number" /></td> 
<td><input data-bind="value: arrival_flight_travelling_from" /></td> 
<td><input data-bind="value: affiliate_via_arr" /></td> 
<td><input data-bind="value: arrival_flight_travelling_to" /></td> 
<td><input data-bind="value: departure_flight_number" /></td> 
<td><input data-bind="value: departure_flight_travelling_from" /></td> 
<td><input data-bind="value: affiliate_via_dept" /></td> 
<td><input data-bind="value: departure_flight_travelling_to" /></td> 
          <td><select data-bind="options: $root.affiliate_congress_registrationDD, optionsValue: 'opValue', value: affiliate_congress_registration, optionsText: 'opName'"></select></td> 
          <td><select data-bind="options: $root.aff_dietaryDD, optionsValue: 'opValue', value: aff_dietary, optionsText: 'opName'"></select></td> 
<td><input data-bind="value: special_requirements" /></td> 
<td><input data-bind="value: EmergencyContactFirstName" /></td> 
<td><input data-bind="value: EmergencyContactDayPhone" /></td> 
          <td><select data-bind="options: $root.EmergencyContactRelationshipDD, optionsValue: 'opValue', value: EmergencyContactRelationship, optionsText: 'opName'"></select></td> 
      </tr> 

     </tbody> 
    </table>  
</form> 


function AffiliateRow(initialAttendeeId, initialWorkCountryCode,initialReferenceNumber,initialTitle,initialattendee_type,initialFirstName,initialLastName,initialJobTitle,initialEnterprise,initialWorkCity,initialWorkEmail,initialAlternateEmail,initialWorkPhone,initialarrival_flight_number,initialarrival_flight_travelling_from,initialaffiliate_via_arr,initialarrival_flight_travelling_to,initialdeparture_flight_number,initialdeparture_flight_travelling_from,initialaffiliate_via_dept,initialdeparture_flight_travelling_to,initialaffiliate_congress_registration,initialaff_dietary,initialspecial_requirements,initialEmergencyContactFirstName,initialEmergencyContactDayPhone,initialEmergencyContactRelationship, row) { 

      var self = this; 
      self.Status = ko.observable("Unsaved"); 
      self.RowNumber = row; 
      self.AttendeeId = initialAttendeeId; 

     self.WorkCountryCode = initialWorkCountryCode; 
     self.ReferenceNumber = initialReferenceNumber; 
     self.Title = initialTitle; 
     self.attendee_type = initialattendee_type; 
     self.FirstName = initialFirstName; 
     self.LastName = initialLastName; 
     self.JobTitle = initialJobTitle; 
     self.Enterprise = initialEnterprise; 
     self.WorkCity = initialWorkCity; 
     self.WorkEmail = initialWorkEmail; 
     self.AlternateEmail = initialAlternateEmail; 
     self.WorkPhone = initialWorkPhone; 
     self.arrival_flight_number = initialarrival_flight_number; 
     self.arrival_flight_travelling_from = initialarrival_flight_travelling_from; 
     self.affiliate_via_arr = initialaffiliate_via_arr; 
     self.arrival_flight_travelling_to = initialarrival_flight_travelling_to; 
     self.departure_flight_number = initialdeparture_flight_number; 
     self.departure_flight_travelling_from = initialdeparture_flight_travelling_from; 
     self.affiliate_via_dept = initialaffiliate_via_dept; 
     self.departure_flight_travelling_to = initialdeparture_flight_travelling_to; 
     self.affiliate_congress_registration = initialaffiliate_congress_registration; 
     self.aff_dietary = initialaff_dietary; 
     self.special_requirements = initialspecial_requirements; 
     self.EmergencyContactFirstName = initialEmergencyContactFirstName; 
     self.EmergencyContactDayPhone = initialEmergencyContactDayPhone; 
     self.EmergencyContactRelationship = initialEmergencyContactRelationship; 
     } 

     function AffiliateViewModel() { 
      var self = this; 
      self.formId = "8cfe5432-8d0f-4e56-b309-29de61322a41"; 

      self.WorkCountryCodeDD = [ 
      { opName: "Afghanistan", opValue: "AF" }, 
      { opName: "Albania", opValue: "AL" }, 
      { opName: "Algeria", opValue: "DZ" }, 
      { opName: "American Samoa", opValue: "AS" }, 
      { opName: "Andorra", opValue: "AD" }, 
      { opName: "Angola", opValue: "AO" }, 
      { opName: "Anguilla", opValue: "AI" }, 
      { opName: "Antarctica", opValue: "AQ" }, 
      { opName: "Antigua and Barbuda", opValue: "AG" }, 
      { opName: "Argentina", opValue: "AR" }, 
      { opName: "Armenia", opValue: "AM" }, 
      { opName: "Aruba", opValue: "AW" }, 
      { opName: "Australia", opValue: "AU" }, 
      { opName: "Austria", opValue: "AT" }, 
      { opName: "Azerbaijan", opValue: "AZ" }, 
      { opName: "Bahamas", opValue: "BS" }, 
      { opName: "Bahrain", opValue: "BH" }, 
      { opName: "Bangladesh", opValue: "BD" }, 
      { opName: "Barbados", opValue: "BB" }, 
      { opName: "Belarus", opValue: "BY" }, 
      { opName: "Belgium", opValue: "BE" }, 
      { opName: "Belize", opValue: "BZ" }, 
      { opName: "Benin", opValue: "BJ" }, 
      { opName: "Bermuda", opValue: "BM" }, 
      { opName: "Bhutan", opValue: "BT" }, 
      { opName: "Bolivia", opValue: "BO" }, 
      { opName: "Bosnia and Herzegovina", opValue: "BA" }, 
      { opName: "Botswana", opValue: "BW" }, 
      { opName: "Bouvet Island", opValue: "BV" }, 
      { opName: "Brazil", opValue: "BR" }, 
      { opName: "British Indian Ocean Territory", opValue: "IO" }, 
      { opName: "Brunei Darussalam", opValue: "BN" }, 
      { opName: "Bulgaria", opValue: "BG" }, 
      { opName: "Burkina Faso", opValue: "BF" }, 
      { opName: "Burundi", opValue: "BI" }, 
      { opName: "Cambodia", opValue: "KH" }, 
      { opName: "Cameroon", opValue: "CM" }, 
      { opName: "Canada", opValue: "CA" }, 
      { opName: "Cape Verde", opValue: "CV" }, 
      { opName: "Cayman Islands", opValue: "KY" }, 
      { opName: "Central African Republic", opValue: "CF" }, 
      { opName: "Chad", opValue: "TD" }, 
      { opName: "Chile", opValue: "CL" }, 
      { opName: "China", opValue: "CN" }, 
      { opName: "Christmas Island", opValue: "CX" }, 
      { opName: "Cocos (Keeling) Islands", opValue: "CC" }, 
      { opName: "Colombia", opValue: "CO" }, 
      { opName: "Comoros", opValue: "KM" }, 
      { opName: "Congo", opValue: "CG" }, 
      { opName: "Congo, the Democratic Republic of the", opValue: "CD" }, 
      { opName: "Cook Islands", opValue: "CK" }, 
      { opName: "Costa Rica", opValue: "CR" }, 
      { opName: "Cote d'Ivoire", opValue: "CI" }, 
      { opName: "Croatia", opValue: "HR" }, 
      { opName: "Cuba", opValue: "CU" }, 
      { opName: "Cyprus", opValue: "CY" }, 
      { opName: "Czech Republic", opValue: "CZ" }, 
      { opName: "Denmark", opValue: "DK" }, 
      { opName: "Djibouti", opValue: "DJ" }, 
      { opName: "Dominica", opValue: "DM" }, 
      { opName: "Dominican Republic", opValue: "DO" }, 
      { opName: "East Timor", opValue: "TL" }, 
      { opName: "Ecuador", opValue: "EC" }, 
      { opName: "Egypt", opValue: "EG" }, 
      { opName: "El Salvador", opValue: "SV" }, 
      { opName: "Equatorial Guinea", opValue: "GQ" }, 
      { opName: "Eritrea", opValue: "ER" }, 
      { opName: "Estonia", opValue: "EE" }, 
      { opName: "Ethiopia", opValue: "ET" }, 
      { opName: "Falkland Islands (Malvinas)", opValue: "FK" }, 
      { opName: "Faroe Islands", opValue: "FO" }, 
      { opName: "Fiji", opValue: "FJ" }, 
      { opName: "Finland", opValue: "FI" }, 
      { opName: "France", opValue: "FR" }, 
      { opName: "French Guiana", opValue: "GF" }, 
      { opName: "French Polynesia", opValue: "PF" }, 
      { opName: "French Southern Territories", opValue: "TF" }, 
      { opName: "Gabon", opValue: "GA" }, 
      { opName: "Gambia", opValue: "GM" }, 
      { opName: "Georgia", opValue: "GE" }, 
      { opName: "Germany", opValue: "DE" }, 
      { opName: "Ghana", opValue: "GH" }, 
      { opName: "Gibraltar", opValue: "GI" }, 
      { opName: "Greece", opValue: "GR" }, 
      { opName: "Greenland", opValue: "GL" }, 
      { opName: "Grenada", opValue: "GD" }, 
      { opName: "Guadeloupe", opValue: "GP" }, 
      { opName: "Guam", opValue: "GU" }, 
      { opName: "Guatemala", opValue: "GT" }, 
      { opName: "Guinea", opValue: "GN" }, 
      { opName: "Guinea-Bissau", opValue: "GW" }, 
      { opName: "Guyana", opValue: "GY" }, 
      { opName: "Haiti", opValue: "HT" }, 
      { opName: "Heard Island and McDonald Islands", opValue: "HM" }, 
      { opName: "Holy See (Vatican City State)", opValue: "VA" }, 
      { opName: "Honduras", opValue: "HN" }, 
      { opName: "Hong Kong", opValue: "HK" }, 
      { opName: "Hungary", opValue: "HU" }, 
      { opName: "Iceland", opValue: "IS" }, 
      { opName: "India", opValue: "IN" }, 
      { opName: "Indonesia", opValue: "ID" }, 
      { opName: "Iran, Islamic Republic of", opValue: "IR" }, 
      { opName: "Iraq", opValue: "IQ" }, 
      { opName: "Ireland", opValue: "IE" }, 
      { opName: "Israel", opValue: "IL" }, 
      { opName: "Italy", opValue: "IT" }, 
      { opName: "Jamaica", opValue: "JM" }, 
      { opName: "Japan", opValue: "JP" }, 
      { opName: "Jordan", opValue: "JO" }, 
      { opName: "Kazakstan", opValue: "KZ" }, 
      { opName: "Kenya", opValue: "KE" }, 
      { opName: "Kiribati", opValue: "KI" }, 
      { opName: "Korea, Democratic People's Republic of", opValue: "KP" }, 
      { opName: "Korea, Republic of", opValue: "KR" }, 
      { opName: "Kuwait", opValue: "KW" }, 
      { opName: "Kyrgyzstan", opValue: "KG" }, 
      { opName: "Lao People's Democratic Republic", opValue: "LA" }, 
      { opName: "Latvia", opValue: "LV" }, 
      { opName: "Lebanon", opValue: "LB" }, 
      { opName: "Lesotho", opValue: "LS" }, 
      { opName: "Liberia", opValue: "LR" }, 
      { opName: "Libya", opValue: "LY" }, 
      { opName: "Liechtenstein", opValue: "LI" }, 
      { opName: "Lithuania", opValue: "LT" }, 
      { opName: "Luxembourg", opValue: "LU" }, 
      { opName: "Macau", opValue: "MO" }, 
      { opName: "Macedonia", opValue: "MK" }, 
      { opName: "Madagascar", opValue: "MG" }, 
      { opName: "Malawi", opValue: "MW" }, 
      { opName: "Malaysia", opValue: "MY" }, 
      { opName: "Maldives", opValue: "MV" }, 
      { opName: "Mali", opValue: "ML" }, 
      { opName: "Malta", opValue: "MT" }, 
      { opName: "Marshall islands", opValue: "MH" }, 
      { opName: "Martinique", opValue: "MQ" }, 
      { opName: "Mauritania", opValue: "MR" }, 
      { opName: "Mauritius", opValue: "MU" }, 
      { opName: "Mayotte", opValue: "YT" }, 
      { opName: "Mexico", opValue: "MX" }, 
      { opName: "Micronesia, Federated States of", opValue: "FM" }, 
      { opName: "Moldova, Republic of", opValue: "MD" }, 
      { opName: "Monaco", opValue: "MC" }, 
      { opName: "Mongolia", opValue: "MN" }, 
      { opName: "Montserrat", opValue: "MS" }, 
      { opName: "Morocco", opValue: "MA" }, 
      { opName: "Mozambique", opValue: "MZ" }, 
      { opName: "Myanmar", opValue: "MM" }, 
      { opName: "Namibia", opValue: "NA" }, 
      { opName: "Nauru", opValue: "NR" }, 
      { opName: "Nepal", opValue: "NP" }, 
      { opName: "Netherlands", opValue: "NL" }, 
      { opName: "Netherlands Antilles", opValue: "AN" }, 
      { opName: "New Caledonia", opValue: "NC" }, 
      { opName: "New Zealand", opValue: "NZ" }, 
      { opName: "Nicaragua", opValue: "NI" }, 
      { opName: "Niger", opValue: "NE" }, 
      { opName: "Nigeria", opValue: "NG" }, 
      { opName: "Niue", opValue: "NU" }, 
      { opName: "Norfolk Island", opValue: "NF" }, 
      { opName: "Northern Mariana Islands", opValue: "MP" }, 
      { opName: "Norway", opValue: "NO" }, 
      { opName: "Oman", opValue: "OM" }, 
      { opName: "Pakistan", opValue: "PK" }, 
      { opName: "Palau", opValue: "PW" }, 
      { opName: "Palestinian Territory, Occupied", opValue: "PS" }, 
      { opName: "Panama", opValue: "PA" }, 
      { opName: "Papua New Guinea", opValue: "PG" }, 
      { opName: "Paraguay", opValue: "PY" }, 
      { opName: "Peru", opValue: "PE" }, 
      { opName: "Philippines", opValue: "PH" }, 
      { opName: "Pitcairn", opValue: "PN" }, 
      { opName: "Poland", opValue: "PL" }, 
      { opName: "Portugal", opValue: "PT" }, 
      { opName: "Puerto Rico", opValue: "PR" }, 
      { opName: "Qatar", opValue: "QA" }, 
      { opName: "Reunion", opValue: "RE" }, 
      { opName: "Romania", opValue: "RO" }, 
      { opName: "Russian Federation", opValue: "RU" }, 
      { opName: "Rwanda", opValue: "RW" }, 
      { opName: "Saint Helena", opValue: "SH" }, 
      { opName: "Saint Kitts and Nevis", opValue: "KN" }, 
      { opName: "Saint Lucia", opValue: "LC" }, 
      { opName: "Saint Pierre and Miquelon", opValue: "PM" }, 
      { opName: "Saint Vincent and the Grenadines", opValue: "VC" }, 
      { opName: "Samoa", opValue: "WS" }, 
      { opName: "San Marino", opValue: "SM" }, 
      { opName: "Sao Tome and Principe", opValue: "ST" }, 
      { opName: "Saudi Arabia", opValue: "SA" }, 
      { opName: "Senegal", opValue: "SN" }, 
      { opName: "Serbia and Montenegro", opValue: "CS" }, 
      { opName: "Seychelles", opValue: "SC" }, 
      { opName: "Sierra Leone", opValue: "SL" }, 
      { opName: "Singapore", opValue: "SG" }, 
      { opName: "Slovakia", opValue: "SK" }, 
      { opName: "Slovenia", opValue: "SI" }, 
      { opName: "Solomon Islands", opValue: "SB" }, 
      { opName: "Somalia", opValue: "SO" }, 
      { opName: "South Africa", opValue: "ZA" }, 
      { opName: "South Georgia and the South Sandwich Islands", opValue: "GS" }, 
      { opName: "Spain", opValue: "ES" }, 
      { opName: "Sri Lanka", opValue: "LK" }, 
      { opName: "Sudan", opValue: "SD" }, 
      { opName: "Suriname", opValue: "SR" }, 
      { opName: "Svalbard and Jan Mayen", opValue: "SJ" }, 
      { opName: "Swaziland", opValue: "SZ" }, 
      { opName: "Sweden", opValue: "SE" }, 
      { opName: "Switzerland", opValue: "CH" }, 
      { opName: "Syria", opValue: "SY" }, 
      { opName: "Taiwan", opValue: "TW" }, 
      { opName: "Tajikistan", opValue: "TJ" }, 
      { opName: "Tanzania, United Republic of", opValue: "TZ" }, 
      { opName: "Thailand", opValue: "TH" }, 
      { opName: "Togo", opValue: "TG" }, 
      { opName: "Tokelau", opValue: "TK" }, 
      { opName: "Tonga", opValue: "TO" }, 
      { opName: "Trinidad and Tobago", opValue: "TT" }, 
      { opName: "Tunisia", opValue: "TN" }, 
      { opName: "Turkey", opValue: "TR" }, 
      { opName: "Turkmenistan", opValue: "TM" }, 
      { opName: "Turks and Caicos Islands", opValue: "TC" }, 
      { opName: "Tuvalu", opValue: "TV" }, 
      { opName: "Uganda", opValue: "UG" }, 
      { opName: "Ukraine", opValue: "UA" }, 
      { opName: "United Arab Emirates", opValue: "AE" }, 
      { opName: "United Kingdom", opValue: "GB" }, 
      { opName: "United States", opValue: "US" }, 
      { opName: "United States Minor Outlying Islands", opValue: "UM" }, 
      { opName: "Uruguay", opValue: "UY" }, 
      { opName: "Uzbekistan", opValue: "UZ" }, 
      { opName: "Vanuatu", opValue: "VU" }, 
      { opName: "Venezuela", opValue: "VE" }, 
      { opName: "Viet Nam", opValue: "VN" }, 
      { opName: "Virgin Islands, British", opValue: "VG" }, 
      { opName: "Virgin Islands, U.S.", opValue: "VI" }, 
      { opName: "Wallis and Futuna", opValue: "WF" }, 
      { opName: "Western Sahara", opValue: "EH" }, 
      { opName: "Yemen", opValue: "YE" }, 
      { opName: "Zambia", opValue: "ZM" }, 
      { opName: "Zimbabwe", opValue: "ZW" }   ]; 
      self.TitleDD = [ 
      { opName: "Mr.", opValue: "Mr." }, 
      { opName: "Ms.", opValue: "Ms." }, 
      { opName: "Miss", opValue: "Miss" }, 
      { opName: "Mrs.", opValue: "Mrs." }, 
      { opName: "Dr.", opValue: "Dr." }, 
      { opName: "Prof.", opValue: "Prof." }   ]; 
      self.attendee_typeDD = [ 
      { opName: "Expert", opValue: "Expert" }, 
      { opName: "Lundbeck Affiliate", opValue: "LundbeckAffiliate" }, 
      { opName: "Delegate", opValue: "Delegate" }, 
      { opName: "Consultant", opValue: "Consultant" }, 
      { opName: "Local Agent", opValue: "Local_Agent" }   ]; 
      self.affiliate_congress_registrationDD = [ 
      { opName: "Yes", opValue: "yes" }, 
      { opName: "No", opValue: "no" }   ]; 
      self.aff_dietaryDD = [ 
      { opName: "Yes", opValue: "Yes" }, 
      { opName: "No", opValue: "no" }   ]; 
      self.EmergencyContactRelationshipDD = [ 
      { opName: "Select One", opValue: "-1" }, 
      { opName: "Unknown", opValue: "0" }, 
      { opName: "Parent", opValue: "1" }, 
      { opName: "Sibling", opValue: "2" }, 
      { opName: "Friend", opValue: "3" }, 
      { opName: "Partner", opValue: "4" }, 
      { opName: "Spouse", opValue: "5" }, 
      { opName: "Colleague", opValue: "6" }, 
      { opName: "Other", opValue: "99" }   ]; 


      self.rows = ko.observableArray([ 


new AffiliateRow('f6e7026b-e51b-4469-ba3e-a2c161e28c70', 'US','34434','Mr.','Expert','Fred','Bloggs','Managing Director','Zibrant','Derby','[email protected]','[email protected]','01332 297535','ABC','London','Portugal','New York','BA 277','New York','Portugal','London','yes','Yes','No Coke','Mrs Bloggs','828282828','5' ,1) 
      ]); 

      self.totalRowNumber = ko.computed(function() { 
       console.log("totalRowNumber: " + self.rows().length); 
       return self.rows().length; 
      }); 

      // Add a new row from the table 
      self.addRow = function() { 
       var tot = self.rows().length + 1; 
       console.log("tot: " + tot); 
       self.rows.push(new AffiliateRow('', self.WorkCountryCodeDD[0],'',self.TitleDD[0],self.attendee_typeDD[0],'','','','','','','','','','','','','','','','',self.affiliate_congress_registrationDD[0],self.aff_dietaryDD[0],'','','',self.EmergencyContactRelationshipDD[0], tot)); 
      }; 

      // Remove a row from the table 
      self.removeRow = function(row) { 
       self.rows.remove(row); 
      }; 

      // Copy a row to the row beneath 
      self.copyRow = function(row) { 
       console.log("row." + row.AttendeeId); 

       // Get the position of the row within the array 
       var rowIndex = self.rows.indexOf(row); 
       console.log("rowIndex: " + rowIndex); 

       // http://stackoverflow.com/questions/122102/most-efficient-way-to-clone-a-javascript-object 
       var newRow = jQuery.extend(true, {}, row); 
       newRow.AttendeeId = ''; 
       self.rows.splice((rowIndex + 1), 0, newRow); 
      }; 

      // Save the rows to the db 
      self.saveRows = function() { 
       console.log("save"); 
       var viewModelPlainJs = ko.toJS(self); 

       var newStatus = "Saved"; 
       self.rows()[0].Status(newStatus);     



      }; 
     } 

     ko.applyBindings(new AffiliateViewModel()); 

回答

1

你似乎已经错过了你保存/未保存的状态标签上的data-bind。它应该是:

<td> 
    <span class="label" data-bind="text: Status">Unsaved</span> 
</td> 
相关问题