밑줄을 사용하여 업데이트 요소

이 자습서를 사용하여 밑줄을 사용하여 템플릿을 사용했습니다. http://backbonetutorials.com/what-is-a-view/밑줄을 사용하여 업데이트 요소

나는 div 태그 구조에 p 태그의 일부 텍스트를 추가하려고합니다. 이것은 약간의 값이 입력되어야하는 텍스트 일뿐입니다. 이 텍스트의 변수를 업데이트하기 위해 밑줄을 사용하는 방법이 있습니까? 또는 내가

<div id="popup"> 
<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p> 
</div>

UPDATE를 템플릿 HTML을 사용 (_template를) 템플릿으로 텍스트를 만든 다음 추가해야합니다 : 나는이 코드를 사용하여 템플릿 문서를 기반으로하고 시도

<html> 
<head> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/underscore.js"></script> 
    <script type="text/javascript" src="js/core.js"></script> 
</head> 
<body> 
    <div id="popup"> 
    <div id="template_holder"></div> 
    </div> 

<!-- TEMPLATES FOR CANCEL PAYMENT MODEL --> 
<script type="text/template" id="card-success_tmp"> 
    <p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p> 
</script> 
</body> 
</html>

그런 다음 내 핵심 JS 파일에 내 팝업

var variables = {variable1:'[xxxx]', variable2:'[MM/YY]'}; 
var template = _.template($("#card-success_tmp").html(), variables); 
$('#popup #template_holder').html(template);

을 시작 클릭 이벤트 내부에 아래 코드를하지만 위는 여전히 작동하지 않습니다.

난

var template = _.template($("#card-success_tmp").html()); 
$('#popup #template_holder').html(template({variable1:'[xxxx]', variable2:'[MM/YY]'}));

그것은 텍스트를 표시하지만, 변수에 전달 된 렌더링되지 않습니다 노력했다.

템플릿을 스크립트 태그가 아닌 문자열로 추가하면 작동합니다. 질문은 스크립트 태그에서 작동하지 않는 이유입니다. 텍스트를 렌더링하지만 전달 된 변수는 렌더링하지 않습니다.

var template = _.template("<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>"); 
$('#popup #template_holder').html(template({variable1:'[xxxx]', variable2:'[MM/YY]'}));

출처

2013-05-16 Chapsterj

일반 밑줄이 있거나 백본 (jQuery 포함)이 있습니까? – Bergi

일반 백본에는 백본이 없음 – Chapsterj

하지만 jQuery가 있습니까? – Bergi

이 템플릿이 주입 일부 값을 가질 필요가 그냥 텍스트가 아닙니다.

템플릿을 만드는 이유는 무엇입니까? 호출 직접

var tmpl = _.template("<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>"); 

// often: 
$("#popup").append(tmpl({variable1: "some text", variable2:"another variable text"}));

또는 :

Underscore docs 언급, 당신은 그것을 미리 컴파일 할 수 있습니다 귀하의 제공 조각에

$("#popup").append(_.template(
    "<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>", 
    {variable1: "some text", variable2:"another variable text"} 
));

다음 template_holder 사업부는 ID를 가지고 있지 클래스 속성 고정, both of your codes 작동합니다.

출처

2013-05-16 20:27:03 Bergi

안녕하세요 Bergi 나는 밑줄 문서를 사용하여 내 질문을 업데이 트했지만 여전히 템플릿에 내 변수를 렌더링 얻을 수 없습니다. – Chapsterj

내 코드가 작동하지 않는 이유는 다른 누구도이 같은 문제가 발생하기 때문입니다. 내 템플릿은 grails 애플리케이션 파일 인 .gsp 파일 안에 있습니다. 그래서 html로 렌더링 할 때 grails는 주석을 위해 ERB 구문을 사용하기 때문에 밑줄 태그를 제거합니다. 핵심은 ERB 구문을 mustache.js 스타일 태그로 변경하는 것입니다. 밑줄에이 기본 설정을 추가해야합니다. 그래서 js 파일에서 맨 위에 추가하십시오.

_.templateSettings.interpolate = /\{\{=(.+?)\}\}/g; 
_.templateSettings.evaluate = /\{\{(.+?)\}\}/g;

그러면 템플릿 코드는 다음과 같을 수 있습니다.

<script type="text/template" id="card-success_tmp"> 
    <p>I want to add some text in here {{=variable1}}, Then add another variable text in here {{=variable2}}</p> 
</script>

여기에 또 다른 좋은 소식이 있습니다. Boolean checks in underscore templates

출처

2013-05-17 13:53:23 Chapsterj

밑줄을 사용하여 업데이트 요소

답변

관련 문제