Meteor 및 jQuery Mobile을 사용하여 버튼 텍스트/이미지 변경

저는 Meteor를 사용하여 응용 프로그램을 작성하고 있으며 jQuery Mobile을 사용하여 모든 코드가 어떻게 어울리는 지 약간 확실하지 않습니다.Meteor 및 jQuery Mobile을 사용하여 버튼 텍스트/이미지 변경

기본적으로 헤더에 편집 버튼이 있습니다. 클릭하면 콘텐츠 섹션의 콘텐츠가 변경되기를 원하며 편집 버튼이 저장을 변경해야합니다. 저장 버튼을 클릭하면 내용이 업데이트되고 버튼이 원래 상태로 돌아갑니다. http://jsfiddle.net/AU2cB/3/

아이디어는 편집 버튼을 클릭하면 입력 필드를 표시하고, 업데이트 된 사용자 입력 된 텍스트를 표시입니다 : 여기에 어떤 JS/JQ와 바이올린이야

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

: 같은

편집 버튼이 보인다 저장을 클릭하면. 나는 분명히 이것에 대한 서버 부분을 가지고 있지 않다. 그래서 Meteor로하는 방법에 대한 조언은 보너스가 될 것이다. (나는 {{> loginButtons}}를 사용하여 페이스 북 로그인을한다)

NB : 나는 매우 새로운 모든. 이의. 그것은 상대적으로 간단한 애플 리케이션, 그래서 루트 디렉토리에 난 그냥 (Meteor.is_client) & if (Meteor.is_server) 문을 가진 1 HTML 파일과 자바 스크립트 파일이 있습니다. 템플릿에 이벤트를 첨부

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

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

는 유성과이를 와이어 :

출처

2012-10-27 jaybong

의이 버튼을 템플릿에 있다고 가정 해 봅시다 버튼의 텍스트를 전환됩니다

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 키의 값을 업데이트 할 것이고, Session은 반응 적이기 때문에 Template.fields.editing 함수를 재실행하고 필드 템플릿을 다시 렌더링 할 것입니다.

사용자가 입력 한 데이터를 저장하려면 세션을 사용할 수도 있습니다. 그 부분을 스스로 이해하도록하겠습니다. 여기서 작성한 코드와 매우 유사합니다. 사용자 정보를 지속적으로 저장하려면 Meteor.user() 및 Collections을 살펴보십시오.

출처

2012-12-26 20:20:31 Rahul

Meteor 및 jQuery Mobile을 사용하여 버튼 텍스트/이미지 변경

답변

관련 문제