JQuery的模板不處理 - 剛剛吐出來的原始文本

我試圖通過從MIX鄧肯麥肯齊的knockout.js教程工作，那裏是你使用一個jQuery模板每個語句一點點 - 這是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的傢伙，所以對不起，如果這是簡單的，但我一直在試圖解決這一問題像一個半小時 - 我看不出是什麼問題。

謝謝！

來源

2012-03-31 Kenn

看來你沒有在另一個腳本標記中調用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>

來源

2012-03-31 04:31:58

是的，在添加後，問題得到解決。：）謝謝 – Rajesh 2013-03-21 05:41:47

其實有一對夫婦正在這裏發生了問題。首先，我把標籤的順序弄錯了。淘汰賽庫需要是最後的。然後，我需要獲得正確版本的JQuery模板庫。這是腳本標記中的包含如何最終抖出來的。

<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>

我在knockouts網站上發現了這個文檔。 http://knockoutjs.com/documentation/template-binding.html請參閱註釋5「使用jQuery.tmpl，一個基於字符串的外部模板引擎」我應該在昨晚找到這個。

謝謝！ Ken

來源

2012-03-31 22:15:42 Kenn

JQuery的模板不處理 - 剛剛吐出來的原始文本

回答

相關問題