如何在KnockoutJS中调用ajax后更新数组中的特定元素

时间:2013-05-01 11:05:56

标签: javascript knockout.js knockout-2.0

我正在使用Knockout来允许在页面的网格中输入数据。在ajax调用返回后,我很难更新特定的行。

这是jsFiddle

http://jsfiddle.net/BbFXC/

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

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

感谢任何帮助。

感谢。

以下是代码:

<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','matt.newboult@zibrant.com','fred.bloggs@gmail.com','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 个答案:

答案 0 :(得分:1)

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

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