使用Meteor和jQuery Mobile更改按鈕文本/圖像

我正在使用Meteor構建應用程序，並且我不清楚所有代碼如何使用jQuery Mobile進行組合。使用Meteor和jQuery Mobile更改按鈕文本/圖像

基本上我有一個編輯按鈕在標題和點擊時，我想內容部分的內容改變，編輯按鈕應該改變說保存。點擊保存按鈕應該更新內容並將按鈕恢復到原始狀態。

編輯按鈕看起來像：

<a data-icon="plus" data-role="button" class="edit" >edit</a>

這裏有沒有JS/JQ小提琴：http://jsfiddle.net/AU2cB/3/

的想法是顯示輸入字段點擊編輯按鈕時，並顯示更新的用戶輸入的文本點擊保存時。我顯然還沒有到服務器這部分，所以任何有關如何與流星做這個建議將是一個獎金（我有Facebook登錄工作使用{{> loginButtons}}

注意：我是對所有人來說都很新穎這個的。這是一個相對簡單的應用程序，所以在根目錄中，我只有1個html文件和一個if（Meteor.is_client）& if（Meteor.is_server）語句的javascript文件。

來源

2012-10-27 jaybong

比方說，你的按鈕是一個模板：

<body> 
    {{> editButton}} 
    {{> fields}} 
</body> 

<template name="editButton"> 
    <a data-icon="plus" data-role="button" class="edit" >edit</a> 
</template>

要與流星這樣組裝起來，將事件附加到模板：

Template.editButton.events({ 
    "click [data-role='button']": function(e) { 
    if ($(e.target).text() == "edit") 
     $(e.target).text("save"); 
    else 
     $(e.target).text("edit"); 
    } 
});

這將切換按鈕的文本，當你點擊它。那麼顯示或隱藏相關字段呢？我們可以使用Session：當您單擊

<template name="fields"> 
    {{#if editing}} 
    <input type="text" name="myField"/> 
    {{/if}} 
</template> 

Template.fields.editing = function() { 
    return Session.get("editing"); 
}

現在：

Template.editButton.events({ 
    "click [data-role='button']": function(e) { 
    if ($(e.target.text() == "edit") { 
     $(e.target).text("save"); 
     Session.set("editing", true); 
    } 
    else { 
     $(e.target).text("edit"); 
     Session.set("editing", false); 
    } 
    } 
});

現在，你需要聽的editing值，並用它來告訴流星相關領域是否應該顯示或不按鈕，Meteor將更新相關會話密鑰的值，並且由於Session是反應性的，它將重新運行Template.fields.editing函數並重新顯示字段模板。

要保存用戶輸入的數據，您還可以使用Session。我會讓你自己弄清楚這部分，這和我在這裏寫的代碼非常相似。要持續保存用戶信息，請查看Meteor.user()和Collections。

來源

2012-12-26 20:20:31 Rahul

使用Meteor和jQuery Mobile更改按鈕文本/圖像

回答

相關問題