JQuery와 템플릿이 처리되지 않은 - 단지 원시 텍스트

Question

내가 MIX에서 던컨 맥켄지의 knockout.js 튜토리얼을 통해 해결하려고 노력하고 있고 당신이 JQuery와 템플릿 각 문을 사용하여 조금이

토해내 - 여기가

입니다

<script id="friendsTemplate" type="text/x-jquery-tmpl"> 
    <ul> 
     {{each(index, friend) friends}} 
     <li>${ friend.name }</li> 
     {{/each}} 
    </ul> 
</script> 

이렇게 다시 만들려고하면 순서가 지정되지 않은 목록 태그 안의 원시 텍스트가 한 번 인쇄됩니다. 즉

내가 내 페이지에이 추가, 그래서 내가 제대로 템플릿 파일을 참조하지 않은 어쩌면 생각

{{each(index, friend) friends}} 
    <li>${ friend.name }</li> 
{{/each}} 

(예에서 JQuery와 사이트를 발견).

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 

나는이 간단한 경우 죄송있는 HTML/JQuery와 사람의 많은하지 오전하지만 난 반 같은 시간 동안이 문제를 해결하기 위해 노력 해왔다 - 나는 문제가 무엇인지 표시되지 않습니다.

감사합니다.

Answer 1

다른 스크립트 태그에서 tmpl 함수를 호출하지 않은 것처럼 보입니다. jQuery 플러그인 페이지에서 예제를 확인하십시오.

{{각}} 템플릿 실제로 여기에 계속 된 문제 몇 가지가 있습니다 http://api.jquery.com/template-tag-each/

당신이 뭔가를 추가해야 할 수도 있습니다 ...

<script> 
var friends = [ 
    { Name: "Mike", Languages: ["French"] }, 
    { Name: "Bill", Languages: [] } 
]; 
$("#friendsTemplate").tmpl(friends) 
    .appendTo("#friendsList"); 
</script> 

Answer 2

태그입니다. 처음에는 태그의 순서가 잘못되었습니다. 녹아웃 라이브러리는 마지막에 있어야합니다. 그런 다음 올바른 버전의 JQuery 템플릿 라이브러리를 가져와야했습니다. 다음은 스크립트 태그의 include가 어떻게 흔들 리게 되었는가입니다.

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script> 
<script src="~/Scripts/knockout-2.0.0.js" type="text/javascript"></script> 

래리의 대답은하지만 내가 knockout.js 사건 것으로 나타나 실제로 나를 위해 그 부분을 돌보는되었다 의심 다른 상황에서 올바른 것입니다. 스크립트 태그를 얻으면 모든 것이 올바르게 작동했습니다. 완성 된 코드는 다음과 같습니다. 새 MVC 응용 프로그램을 만들어 홈 컨트롤러에 붙여 넣을 수 있습니다.

@{ 
    ViewBag.Title = "Home Page"; 
} 

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script> 
<script src="~/Scripts/knockout-2.0.0.js" type="text/javascript"></script> 

<h3>Details</h3> 

<p>First Name: <input data-bind="value: firstName"/> </p> 
<p>Last Name: <input data-bind="value: lastName"/> </p> 
<p>Name: <span data-bind="text: fullName"/> </p> 

<h2>Friends</h2> 
<div data-bind="template: 'friendsTemplate'"></div> 

<script id="friendsTemplate" type="text/html"> 
    <ul> 
     {{each friends}} 
     <li>${ name }</li> 
     {{/each}} 
    </ul> 
</script> 


<script type="text/javascript"> 
    function Friend(name) { 
     return { 
      name: ko.observable(name) 
     }; 
    } 

    var viewmodel = { 
     firstName: ko.observable("bert"), 
     lastName: ko.observable("bert"), 
     friends: ko.observableArray([new Friend("Ralphie"), new Friend("Waldo")]) 
    }; 

    viewmodel.fullName = ko.dependentObservable(function() { 
     return this.firstName() + " " + this.lastName(); 
    }, viewmodel); 

    ko.applyBindings(viewmodel); 
</script> 

녹아웃 사이트에서이 문서를 발견했습니다. http://knockoutjs.com/documentation/template-binding.html 주 5 "외부 문자열 기반 템플리트 엔진 인 jQuery.tmpl 사용"을 참조하십시오.이 어제 밤에 발견 했어야합니다.

감사합니다. Ken