淘汰賽 - 發行中添加用戶輸入到表格

這是我的HTML代碼淘汰賽 - 發行中添加用戶輸入到表格

<tbody data-bind="foreach: awards"> 
    <tr> 
     <td data-bind="text: name"></td> 
     <td data-bind="text: email"></td> 
     <td data-bind="text: phone"></td> 
     <td data-bind="text: address"></td> 
     <td ><input type="button" class="btn btn-success pull-centre" value="Update!" /></td> 
     <td ><input type="button" class="btn btn-success pull-centre" value="Delete!" /></td> 

    </tr> 
</tbody> 


<form class="well form-inline" id="myform" > 
      <div class="form-group"> 
       <label><b>Form</b></label> 
      </div> 
      <div class="form-group"> 
       <input type="text" data-bind="value:newName" class="span4" placeholder="Name" id="n" > 
       </div> 
       <br> 
       <div class="form-group"> 
       <input type="text" data-bind="value:phone" class="span4" placeholder="Phone Number" id="p"> 
       </div> 
       <br> 
       <div class="form-group"> 
       <input type="text" class="span4" data-bind="value:email" placeholder="Email" id="e"> 
       </div> 
       <br> 
       <div class="form-group"> 
       <input type="text" class="span4" placeholder="Address" data-bind="value:adrs" id="a"> 
       </div> 

     <br> 
      <button type="button" class="btn" data-bind="click: showMe">Find</button> 
       </div> 

      </form>

這是JavaScript + KO綁定

function komodel() { 
    var self = this; 
    self.newName = ko.observable(); 
    self.phone = ko.observable(); 
    self.email = ko.observable(); 
    self.adrs = ko.observable(); 


    self.awards = ko.observableArray([{ 
     name: "sohaib", 
     phone: "03009496301", 
     email: "[email protected]", 
     address: "faisal town" 
    }, { 
     name: "pappu", 
     phone: "45609496301", 
     email: "[email protected]", 
     address: "asdasd jinga lala faisal town" 
    }]); 



    self.showMe = function() { 
     self.awards.push({ 
      name: self.newName, 
      phone: self.phone, 
      email: self.email, 
      address: self.adrs 
     }); 

    } 
}

的問題是，雖然通過新的行添加到表格雖然是表格，但是當添加一個新行時，前一個將被寫入。我如何克服它？

來源

2013-11-24 Haseeb Javed

什麼是你想用你的代碼呢？ –

我添加了一些編輯，看看它現在是否有意義。基本上它的一個表的前兩行最初通過JSON對象加載，而其他通過表單在運行時加入。 –

我的代碼工作正常嗎？ –

在您的代碼中，當您添加新項目時，您推送observable對象不是它的價值。因此，當您繼續添加與之前推送的對象關聯的新項目時，舊值將被覆蓋。

因此改變你showMe功能是把你的observable對象的值：

self.showMe = function() { 
    self.awards.push({ 
     name: self.newName(), 
     phone: self.phone(), 
     email: self.email(), 
     address: self.adrs() 
    }); 

}

JsFiddle Demo

來源

2013-11-24 14:04:27

淘汰賽 - 發行中添加用戶輸入到表格

回答

相關問題