Tempo.js: шаблонизированный механизм рендеринга JSON не запускает JavaScript при рендеринге элементов - PullRequest
Новая
       16

Tempo.js: шаблонизированный механизм рендеринга JSON не запускает JavaScript при рендеринге элементов

1 голос
/ 30 октября 2011

Проблема: визуализированные элементы не выполняют 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>

Но когда мы нажимаем на элементы, мы ничего не получаем.Конечно, оповещение - это не тот JS, который я хочу обработать при помощи мыши - мне нужны более сложные вещи, но этот пример посвящен общему использованию шаблонов и JS с Tempo .

Итак - как получитьвокруг этой проблемы?

Обновление

Демонстрация представлена ​​здесь http://jsfiddle.net/79Y77/2/

1 Ответ

2 голосов
/ 31 октября 2011

Рекомендуемый подход заключается в использовании метода jQuery live () для привязки обработчиков событий, поскольку они не копируются при создании каждого элемента. См. Раздел «Расширенные темы»> «Привязка обработчиков событий» @ http://tempojs.com/

См. Пример здесь: http://jsfiddle.net/zfJbp/1/

...