將數組推入kb.collectionObservable

Question

我想知道是否可以將數組推送到具有特定html特徵的集合observable中。例如，這是我的HTML的外觀爲標準：

<thead class = "well"> 
    <th>Date</th> 
    <th>Reference</th> 
    <th>Note</th> 
    <th><button data-bind= "click: add_note" class = "btn btn-mini"><i class="icon-plus"></i></button></th> 
    </thead> 
    <tbody data-bind = "foreach: policy_notes"> 
    <td data-bind = "dateTimeString: date_inserted"></td> 
    <td data-bind = "text: reference"></td> 
    <td data-bind = "text: note"></td> 
    <td></td> 
    </tbody> 

但我要推一個新行是一個<input>元素。我目前正在推新像這樣：

add_note: function(){ 
    page.viewModel.policy_notes.collection().push(
    { 
     date_inserted: (new Date()).toISOString(), 
     reference: 'HEY!', 
     note: 'HEY!' 
    } 
); 
}, 

但我想參考和註釋成爲輸入元素。有任何想法嗎？

Answer 1

好吧，這是我做了解決它，它不是一個非常優雅的解決方案。我在這些行中添加了隱藏的輸入框。

<tbody data-bind = "foreach: policy_notes"> 
    <td data-bind = "dateTimeString: date_inserted"></td> 
    <td><span id = "ref_hide" data-bind = "text: reference"></span><input data-bind = "value: reference" type = "text" id = "ref_edit" style = "display:none; height: 10px" placeholder = "Reference"></input></td> 
    <td><span id = "note_hide" data-bind = "text: note"></span><input data-bind = "value: note" type = "text" id = "note_edit" style = "display:none; height: 10px; width: 99%" placeholder = "Note"></input></td> 
    <td><button data-bind = "click: save_note" id = "save_note" class = "btn btn-mini" style = "display:none"><i class="icon-ok"></i></button</td> 
</tbody> 

並簡單地使用jQuery顯示和隱藏。

add_note: function(element){ 
    page.viewModel.policy_notes.collection().unshift(
    { 
     date_inserted: (new Date()).toISOString(), 
     reference: '', 
     note: '' 
    }, 
); 

    $('#note_edit').show(); 
    $('#note_hide').hide(); 

    $('#ref_edit').show(); 
    $('#ref_hide').hide(); 

    $('#save_note').show(); 
}, 

是否有更優雅的解決方案，使用jquery綁定？