問題:渲染項目不執行屬於thare模式的JS。Tempo.js:模板化JSON渲染引擎在渲染項目時不運行javascript
我們有HTML這樣的:
<div id="tabs-fun" class="fun">
<ol id="marx-brothers">
<div data-template> <li class="file-{{is_public}}"> <p id="item-file-{{_tempo.index}}">{{file_name}} | {{modified}} | {{_tempo.index}} </p></li>
<script>
$('#item-file-{{_tempo.index}}').mouseup(function(){
alert('hello!');
});
</script>
</div>
<li data-template-fallback>Sorry, JavaScript required!</li>
</ol>
</div>
而且我們有這樣的JSON:
[
{
"encoded_url": "893067edfcc310c7f32657b7faf314dcb472efe808ffa5a6560cbda2c1cba0e5.user.file",
"file_name": "Привет Мир.jpg",
"user_name": "[email protected]",
"modified": "2011-10-30 18:06:28",
"is_public": 0
},
{
"encoded_url": "d1f2d21925d11931981e3bc0339d6a278e9bbd7ba9db6a96e45c9bbd9ecff0d9.user.file",
"file_name": "Привет Мир 2.jpg",
"user_name": "[email protected]",
"modified": "2011-10-30 18:06:48",
"is_public": 1
}
]
與JS可使其:
<script type="text/javascript">
$(document).ready(function() {
var twitter = Tempo.prepare('marx-brothers');
twitter.starting();
$.get("ufs.json", function(json)
{
var data = $.parseJSON(json);
twitter.render(data);
});
});
</script>
而我們得到有效的HTML頁數:
<ol id="marx-brothers">
<li data-template-fallback="" style="display: none; ">Sorry, JavaScript required!</li>
<div data-template=""> <li class="file-0"> <p id="item-file-0">Привет Мир.jpg | 2011-10-30 18:06:28 | 0 </p></li>
<script>
$('#item-file-0').mouseup(function(){
alert('hello!');
});
</script>
</div><div data-template=""> <li class="file-1"> <p id="item-file-1">Привет Мир 2.jpg | 2011-10-30 18:06:48 | 1 </p></li>
<script>
$('#item-file-1').mouseup(function(){
alert('hello!');
});
</script>
</div></ol>
但是whan我們點擊物品我們什麼都沒收到。當然,警報不是我想要在鼠標上處理的JS - 我需要更復雜的東西,但是這個示例是關於模板和JS的一般使用,與Tempo。
那麼 - 如何解決這個問題?
更新演示這裏提出http://jsfiddle.net/79Y77/2/
我注意到警報 '#項目文件 - {{_ tempo.index}}' 會提醒「#項目文件 - {{_速度。索引}}',但頁面上的js表示,alert('#item-file-0') – sissonb