總是在第一個位置添加一個Knockoutjs綁定記錄

Question

我有以下使用KnockoutJS管理集合的簡單表單。

我需要的是始終將新記錄在上面，也訪客1題，如果增加新的應增加..所以訪客2，訪客3，依此類推。

另外我不應該能夠刪除一個記錄，當只有1個。所以至少我應該總是有一個記錄。

這裏是我的html代碼：

<div> 
<div class="panel" data-bind="foreach: contacts"> 
          <div> 
           <h4>Visitor 1</h4> 
          </div> 

          <div> 
           <!-- ## Panel Content --> 
           <div > 
            <label>First Name</label> 
            <input type="text" data-bind='value: firstName' /> 
           </div> 

           <div > 
            <label>Last Name</label> 
            <input type="text" data-bind='value: fathersLast' /> 
           </div> 

           <div > 
            <label>Country</label> 
            <input type="text" data-bind='value: country' /> 
           </div> 
           <button data-bind='click: $root.removeContact'>Delete</button> <button data-bind='click: $root.addContact'>Add New</button> 
           <!-- ##/Panel Content --> 
          </div> 
         </div> 
</div> 

這裏是我的JavaScript代碼：

var initialData = [ 
    { firstName: "John", fathersLast: "Smith", country : "USA" 
    }, 
    { firstName: "George", fathersLast: "Fox", country : "Canada" 
    } 
]; 

var ContactsModel = function(contacts) { 
    var self = this; 
    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(contact) { 
     return { firstName: contact.firstName, fathersLast: contact.fathersLast, country: contact.country }; 
    })); 

    self.addContact = function() { 
     self.contacts.push({ 
      firstName: "", 
      fathersLast: "", 
      country: "" 
     }); 
    }; 

    self.removeContact = function(contact) { 
     self.contacts.remove(contact); 
    }; 
}; 

ko.applyBindings(new ContactsModel(initialData)); 

而且這裏更好的參考是的jsfiddle：http://jsfiddle.net/9k5uT/1/

非常感謝。

Answer 1

使用unshift()將一些東西添加到數組的開頭。

self.addContact = function() { 
     self.contacts.unshift({ 
      firstName: "", 
      fathersLast: "", 
      country: "" 
     }); 
    }; 

您可以使用$index指多數民衆贊成在其上迭代（這是一個可觀的，所以你需要添加括號）數組的當前索引。

<h4 data-bind="text: 'Visitor ' + ($index() + 1)"></h4> 

最後，可以防止去除用一個簡單的if語句中檢查長度的最後一個接觸的（它可以謹慎地添加alert否則）：

self.removeContact = function(contact) { 
    if (self.contacts.length > 1) { 
     self.contacts.remove(contact); 
    } 
};