將模板動態插入表格行

我有一個表格，其中包含來自集合的數據。當用戶點擊一行時，我想用表單替換該行的內容以編輯內容。如果可能的話，如果沒有jQuery，流星的做法是什麼？將模板動態插入表格行

<template name="table"> 
    <table> 
    {{#each items}} 
    {{> showrow}} 
    {{else}} 
    </table> 
</template> 

<template name="showrow"> 
    <tr> 
    <td>{{name}}</td> 
    </tr> 
</template> 

<template name="editrow"> 
    <tr> 
    <form> 
     … form html … 
    </form> 
    </tr> 
</template>

從本質上講，它是關於更換showrow模板WITN的editrow爲ONW行，我想。這是一個合理的方法嗎？任何指針？

來源

2013-06-12 wackazong

好的，我想我可以用這個答案改變模板系統的HTML：http://stackoverflow.com/a/15092343/233430。但是，我如何爲特定的表格行執行此操作？ – wackazong

你可以在你的模板幫手

Template.table.editrow = function() { 
    return (this.editmode) 
}

this可以訪問，這將是在收集在循環中特定項目的數據上下文使用邏輯幫手

<template name="table"> 
    <table> 
    {{#each items}} 
     {{#if editmode}} 
      {{>editrow}} 
     {{else}}   
      {{> showrow}} 
     {{/if}} 
    {{/each}}   
    </table> 
</template>

然後。所以如果你有一個editmode:true那個項目，它會使用編輯行。

來源

2013-06-12 15:20:38 Akshat

或者，您可以有一個會話變量來跟蹤哪些項目正在編輯。然後你可以像'return Session.get（'editingItemId'）=== this._id'這樣做。然後，您需要在'created'和離開編輯模式時將會話變量設置爲'null'。 –

謝謝。 @Akshat，如果我改變項目中的editmode，會自動改變顯示？ – wackazong

我寧願將正在編輯的項目放入會話變量中，對我來說更有意義，特別是對於多個用戶。 – wackazong

好的，這比預期的更容易。 1：0流星：

我使用MongoDB _id作爲每行的標識符，數據屬性爲：data-id="{{_id}}"。

然後，我建立了一個click事件處理程序上<tr> -elements：

Template.booking.events({ 
    'click tr': function(event, template) { 
     Session.set(editBookingId, event.currentTarget.getAttribute('data-id')); 
    } 
});

模板幫手聽來電ID和返回true，如果ID匹配：

Template.booking.helpers({ 
    'isEdited': function(id) { 
     return Session.get(editBookingId) == id; 
    } 
});

在模板中，我決定用{{#if}}是否顯示正常行或編輯對話框：

{{#if isEdited _id}}EDIT{{/if}}

很少的代碼。非常好。感謝指針。

來源

2013-06-13 21:55:24 wackazong

將模板動態插入表格行

回答

相關問題