jquery - .render 不是一个函数，在 jquery 中使用模板

Question

我在 masterPage 中有我的模板，然后我有一个带有 userControl.ascx 的 webpart，我假装通过这个 userControl 通知模板的不同字段。

这是我在 masterPage.master 中的模板：

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

        <div id="discussion-with-comments-wrapper_{{=_DiscussionId}}">

            <div class="subsection theme-header">
                <div class="wrapper">
                    <div class="gray-arrow"></div>
                    <div class="avatar clearfix">
                        <div class="thumbnail-wrapper">
                            <a href="{{=AdminProfileUrl}}"><img class="thumbnail" src="{{=AdminImage}}"/></a>
                        </div>
                    </div>

                    <div class="theme-content">
                        <p class="title"><a href="{{=url}}">{{=Name}}</a>
                            {{#if _Active !== true}}
                                <asp:Literal runat="server" Text="<%$Resources:ADNResource,NoActiveGroup%>"/> 
                            {{/if}}
                        </p>
                        <p>{{=CreatedDate}}</p>

                        <p><a class="name" href="{{=AdminProfileUrl}}">{{=AdminName}}</a> | {{=AdminLocation}} | Rnk: {{=AdminPoints}}</p>

                        <p>
                            {{=Description}}
                        </p>
                        <div class="recommend">                                                                       
                            <iframe src="//www.facebook.com/plugins/like.php?href={{=UniqueUrl}}&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
                        </div>
                        <div id=inapropiatedCmnt_{{=_DiscussionId}} class="commentinapropiate discussionInapropiate">
                            <div class="icon-sprite icon-alert"></div>
                            <asp:Literal runat="server" Text=" <%$Resources:ADNResource,InapropiatedComment%>"/> 
                        </div> 
                        {{#if _IsCurrentUserOwner}}
                            {{#if _Active eq='true'}}
                                <div id="deleteDiscussion_{{=_DiscussionId}}" class="delete-link button-secondary-L-S"><asp:Literal runat="server" Text=" <%$Resources:ADNResource,Delete%>"/> </div>
                            {{/if}}
                        {{/if}}  

                   </div>                 
                </div>
            </div>

            <div id="AddCommentBox" class="AddCommentBox subsection theme" style="display:none;">
                <div class="wrapper">
                    <textarea class="txtComment" id="txtComment_{{=_DiscussionId}}" rows="3" cols="65" />
                    <div class="button-L-S btnComment" id="btnComment_{{=_DiscussionId}}">
                        <asp:Literal runat="server" Text="<%$Resources:ADNResource,Comment%>"/> 
                    </div>
                </div>
            </div>

            <div class="commentsWrapper" id="Comments_{{=_DiscussionId}}">            
                {{#if Activities}}                                                               
                    {{#each Activities}}  
                        <div class="comment subsection theme">                                 
                            <div class="wrapper">
                                {{#if titleHeader}}
                                    <p class="title">{{=titleHeader}}</p>
                                {{/if}}

                                <div class="avatar clearfix">
                                    <div class="thumbnail-wrapper">
                                        <img class="thumbnail" src="{{=UserImage}}" />
                                    </div>
                                </div>

                                <div class="theme-content">
                                    <a class="name" href="{{=UserProfileUrl}}">{{=UserName}}</a>

                                    <p>{{=Comment}}</p>

                                    <div class="recommend"> 
                                        <iframe src="//www.facebook.com/plugins/like.php?href={{=UniqueUrl}}&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
                                    </div>


                                    <div id=inapropiatedCmnt_{{=_Id}} class="commentinapropiate">
                                        <div class="icon-sprite icon-alert"></div>
                                        <asp:Literal runat="server" Text=" <%$Resources:ADNResource,InapropiatedComment%>"/> 
                                    </div>

                                    {{#if _IsCurrentUserOwner}}
                                        <div id="deleteComment_{{=_Id}}" class="delete-link button-secondary-L-S"><asp:Literal runat="server" Text=" <%$Resources:ADNResource,Delete%>"/> </div>
                                    {{/if}}

                                </div>    
                            </div>                 
                        </div>
                    {{/each}}
                {{else}}
                            <div class="comment subsection theme">
                                <div class="wrapper">
                                    <asp:Literal runat="server" Text=" <%$Resources:ADNResource,NoCommentsYet%>"/> 
                                </div>
                            </div>
                {{/if}}
            </div>

        </div>


</script>

<script id="GroupDiscussionsComentsTemplate" type="text/x-jquery-tmpl">            
    <div class="comment subsection theme" id="comment_{{=_Id}}" style="display:none;">                                 
        <div class="wrapper">
            {{#if titleHeader}}
                <p class="title">{{=titleHeader}}</p>
            {{/if}}

            <div class="avatar clearfix">
                <div class="thumbnail-wrapper">
                    <img class="thumbnail" src="{{=UserImage}}" />
                </div>
            </div>

            <div class="theme-content">
                <a class="name" href="{{=UserProfileUrl}}">{{=UserName}}</a>

                <p>{{=Comment}}</p>

                <div class="recommend">   
                    <iframe src="//www.facebook.com/plugins/like.php?href={{=UniqueUrl}}&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
                </div>

                <div id=inapropiatedCmnt_{{=_Id}} class="commentinapropiate">
                    <div class="icon-sprite icon-alert"></div>
                    <asp:Literal runat="server" Text=" <%$Resources:ADNResource,InapropiatedComment%>"/> 
                </div>

                {{#if _IsCurrentUserOwner}}
                    <div id="deleteComment_{{=_Id}}" class="delete-link button-secondary-L-S"><asp:Literal runat="server" Text=" <%$Resources:ADNResource,Delete%>"/> </div>
                {{/if}}

            </div>    
        </div>
    </div>
</script>

<script id="GroupDiscussionsTemplateNoResults" type="text/x-jquery-tmpl">
    <div class="subsection">
        <div class="wrapper">
            <asp:Literal runat="server" Text="<%$Resources:ADNResource,NoDiscussionsForThisGroup%>"/>
        </div>
    </div>        
</script>

我使用函数 .render 通过以下代码通知此模板的某些字段：

function displayGroupDiscussions(param_group, maxDiscussions) {
        iDiscussions = 0;

        showLoading();
        $.getJSON("/_layouts/getDiscussions.ashx",
            {
                groupId: param_group,
                startIndexDiscussions: iDiscussions,
                numberOfDiscussions: maxDiscussions
            },
                function (data) {
                    if(data.CallOk) {
                        if (data.Data != null) {
                            if (data.Data.length > 0) {
                                $('#groupDiscussionsBox').html(
                                    $('#GroupDiscussionsTemplate').render(data.Data)
                                );
                            } else {
                                $('#groupDiscussionsBox').html(
                                    $("#GroupDiscussionsTemplateNoResults").render()
                                );
                                $('div#more').remove();
                            }
                        } else {
                            $('#groupDiscussionsBox').html(
                                $("#GroupDiscussionsTemplateNoResults").render()
                            );
                            $('div#more').remove();
                        }
                    } else { 
                        $('#groupDiscussionsBox').html(data.Message);
                    }
                }
            ).complete(
                function () {
                    hideLoading();

                    if(<%= ParentWebPart.CanAddComments.ToString().ToLower() %>){
                        $('.AddCommentBox').show();

                        $('.btnComment').click( function() { 
                            var discId = this.id.split("_")[1];
                            var commentText = $('textarea#txtComment_' + discId).val();
                            addCommentToDiscussion(discId, commentText);
                        });
                    }

                    $('.discussionInapropiate').click( function() { 
                        var discId = this.id.split("_")[1];
                        reportInapropiate(discId, "Discussion");
                        $('#' + this.id).hide('slow');
                    });
                    $('.commentinapropiate').click( function() { 
                        var discId = this.id.split("_")[1];
                        reportInapropiate(discId, "DiscussionComment");
                        $('#' + this.id).hide('slow');
                    });

                    $('.delete-link').click( function() {                         
                        deleteDiscussionItem(this.id);
                    });
                }
            );
    }

它在 Mozilla 中报告以下错误：

$("#GroupDiscussionsTemplate").render is not a function
http://testpcir.powerslide.cir/Pages/foro.aspx
Line 758

在这个错误中我发现了这个--->clone(a=readystatechange , e=undefined)

有人可以帮助我吗？

谢谢

Answer 1

我的场景解释如下：-我在 jquery 中调用渲染函数，但由于未定义不是函数而引发错误。我已经放置了脚本文件并且在我的代码中没有错误，但它仍然会引发错误。

之后我意识到在加载渲染脚本之前我正在调用出现问题的渲染函数

解决方案L：-

我在 document.ready 函数中调用了渲染函数，以便在加载所有元素后调用渲染函数。现在它工作正常

Answer 2

GroupDiscussionsTemplate没有render方法，所以可能的原因有很多：

• 包含displayGroupDiscussions的GroupDiscussionsTemplate脚本在源顺序中位于脚本之前
• GroupDiscussionsTemplate按调用方式创建getDiscussions.ashx，因此它data不是 DOM的一部分
• 不正确地使用.render而不是.tmpl