javascript - 节奏.js : templated JSON rendering engine does not run javascript when renders items

Question

问题:渲染的项目不执行作为模板一部分的 JS。

我们有这样的 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": "jdfg@mail.ru",
        "modified": "2011-10-30 18:06:28",
        "is_public": 0
    },
    {
        "encoded_url": "d1f2d21925d11931981e3bc0339d6a278e9bbd7ba9db6a96e45c9bbd9ecff0d9.user.file",
        "file_name": "Привет Мир 2.jpg",
        "user_name": "jdfg@mail.ru",
        "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>

但是当我们点击项目时，我们什么也得不到。 Ofcourse alert is not the JS I want to handle on mouse up - 我需要更复杂的东西，但这个示例是关于模板和 JS 的一般使用 Tempo .

那么 - 如何解决这个问题？

更新

此处演示 http://jsfiddle.net/79Y77/2/

Answer 1

推荐的方法是使用 jQuery live() 方法来绑定(bind)事件处理程序，因为在生成每个元素时不会复制这些事件处理程序。请参阅高级主题 > 绑定(bind)事件处理程序 @ http://tempojs.com/

请参阅此处示例:http://jsfiddle.net/zfJbp/1/