如何在我的插件之外创建可用的递归 jQuery 模板 (tmpl)?

发布于 2024-10-31 22:34:16 字数 1873 浏览 6 评论 0原文

我有一个 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();
    });
});

I have a Json object that I'm dumping into a jQuery template (tmpl). It needs to be recursive because the Json object can be n-levels deep. This code works. However, if I wrap it in a function (it belongs in a jQuery plugin i'm writing), it stops working. To see what I mean simply uncomment the function wrapper in the Javascript.

Play with it: 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 ));

More info: I'm using RequireJS to load the files and kick off the whole process. I think that's what's killing the scope. Here's the code for that:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

月亮是我掰弯的 2024-11-07 22:34:16

这是因为您没有将 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");
})($); //########################

It is because you are not passing the jquery object as parameter to your function wrapper.

Working Example: http://jsfiddle.net/tkdZg/3

Change it to:

(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");
})($); //########################
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文