Как сделать рекурсивный шаблон jQuery (tmpl) доступным вне моего плагина? - PullRequest
2 голосов
/ 13 апреля 2011

У меня есть объект Json, который я выгружаю в шаблон jQuery (tmpl).Он должен быть рекурсивным, потому что объект Json может иметь глубину n уровней.Этот код работает.Однако, если я обертываю его в функцию (он принадлежит плагину jQuery, который я пишу), он перестает работать.Чтобы понять, что я имею в виду, просто раскомментируйте оболочку функции в Javascript.

Поиграйте с ней: http://jsfiddle.net/dbme/tkdZg/6/

HTML:

<script id="evntTemplate" type="text/x-jquery-tmpl">

{{if data.identifiers}}
<div id="${data.identifiers.id}" class="bsa-event">
    type: ${data.identifiers.type}<br />
    id: ${data.identifiers.id}<br />
    {{if children}}
        {{each(i, child) children}}
        <blockquote>
            <p>        
            {{if children}}
               {{tmpl(children) "evntTemplate"}}
            {{/if}}
            </p>
        </blockquote>
        {{/each}}
    {{/if}}  
</div>
{{/if}}
</script>
<div id="eventList"></div>

Javascript:

//(function ($) {
//    $.fn.SomePlugin = function() {
var movies = {
    "data": {
        "identifiers":{
            "type":0, "id":"makeunique_907827h"
        }
    },
    "children": {
        "data": {
            "identifiers": {
                "type":1, "id":"makeunique_716786g"
            }
        },
        "children": {
            "data": {
                "identifiers": {
                    "type":1, "id":"makeunique_234355g"
                }
            }
        }        
    }
};

/* Render the template with the data */
var evntTemplate = $( "#evntTemplate" ).template( "evntTemplate" );
$.tmpl(evntTemplate, movies).appendTo("#eventList");
    //};
//}( jQuery ));

Дополнительная информация: я использую RequireJS для загрузки файлов и запуска всего процесса.Я думаю, это то, что убивает прицел.Вот код для этого:

require(["jquery", "jquery.tmpl", "jquery.someplugin"], function($) {
    $(function() {
        $('body').SomePlugin();
    });
});

1 Ответ

0 голосов
/ 13 апреля 2011

Это потому, что вы не передаете объект jquery в качестве параметра в оболочку функции.

Рабочий пример: http://jsfiddle.net/tkdZg/3

Измените его на:

(function($) {
var movies = {
    "data": {
        "identifiers":{
            "type":0, "id":"makeunique_907827h"
        }
    },
    "children": {
        "data": {
            "identifiers": {
                "type":1, "id":"makeunique_716786g"
            }
        },
        "children": {
            "data": {
                "identifiers": {
                    "type":1, "id":"makeunique_234355g"
                }
            }
        }        
    }
};

/* Render the template with the data */
var evntTemplate = $( "#evntTemplate" ).template( "evntTemplate" );
$.tmpl(evntTemplate, movies).appendTo("#eventList");
})($); //########################
...