Jquery jsRender加载远程模板（AJAX数据问题）_Jquery_Jsrender

Jquery jsRender加载远程模板（AJAX数据问题）

jquery

Jquery jsRender加载远程模板（AJAX数据问题）,jquery,jsrender,Jquery,Jsrender,我正在尝试升级一个网站以使用jsRender模板（它曾经使用jTemplates），我一直在研究jsRender（Boris的网站和John Papa制作的材料），并尝试按照以下说明操作：请注意，截至2013年11月13日，对该问题进行了编辑，以反映部分解决方案并清理内容：经过大量实验后，我能够让jsRender模板处理静态数据，但一旦我将数据更改为ajax源，模板就会呈现为空。我相信它可能是空的，因为我没有在.js模板本身中指定正确的措辞，但我已经尝试了各种变体，但没有任何效果我的页面是

我正在尝试升级一个网站以使用jsRender模板（它曾经使用jTemplates），我一直在研究jsRender（Boris的网站和John Papa制作的材料），并尝试按照以下说明操作：

请注意，截至2013年11月13日，对该问题进行了编辑，以反映部分解决方案并清理内容：

经过大量实验后，我能够让jsRender模板处理静态数据，但一旦我将数据更改为ajax源，模板就会呈现为空。我相信它可能是空的，因为我没有在.js模板本身中指定正确的措辞，但我已经尝试了各种变体，但没有任何效果

我的页面是一个基本的.htm页面。我在标题中使用jQuery 1.10.2、json.js和jsrender.min.js。这是我在页面上的脚本：

<script style='text/javascript'>
$(function () {
    lazyGetTemplate('PopupChildren');
});

function lazyGetTemplate(name) {
    var deferred = $.Deferred();
    if ($.templates[name]) {
        deferred.resolve();
    }
    else {
        $.getScript("/_Scripts/" + name + ".js").then(function () {
            if ($.templates[name]) {
                deferred.resolve();
            }
            else {
                alert("Script: \"" + name + ".js\" failed to load.");
                deferred.reject();
            }
        });
    }
}

/* This is my sample static data that jsRender works with */
var staticdata = [
{
    "TypeID": "88", "Value": "ORGANICS"
},
{
    "TypeID": "89", "Value": "SPECIFIED ORGANICS"
}
];

function getMyTemplate(data) {
    $div_Child.html($.templates.PopupChildren.render(data)); 
 //change data to staticdata to test static info, I've also set this to JSON.stringify(data) but the result is still empty
}

/* This is the ajax that calls the external function I'm using for testing */
function selItem(cControl, treeID, treeTrans) {
    var parentID = treeID;

    if ($(cControl).parent().find('ul').length == 0) {
        $.ajax({
            type: "Post",
            url: "Contractor_ws.asmx/web_getChildren",
            async: true,
            dataType: "text",
            data: "{parentID:" + parentID + ", popupType:'" + $('#hid_popupType').val() + "'}",
            contentType: "application/json",
            success: function (data) {
                if (data != null) { //menu item has children
                    $(cControl).after("<div id=\"div_Child\"></div>");
                    $div_Child = $(cControl).parent().find('#div_Child');
                    $div_Child.hide();
                    getMyTemplate(data); 
                    $div_Child.show('slow');
                }
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
    }
}

</script>


$（函数（）{
lazyGetTemplate（“PopupChildren”）；
});
函数lazyGetTemplate（名称）{
var deferred=$.deferred（）；
如果（$.templates[名称]）{
延迟。解决（）；
}
否则{
$.getScript（“/\u Scripts/”+name+“.js”）。然后（函数（）{
如果（$.templates[名称]）{
延迟。解决（）；
}
否则{
警报（“脚本：\”“+name+”.js\“未能加载。”）；
拒绝（）；
}
});
}
}
/*这是jsRender使用的静态数据示例*/
var静态数据=[
{
类型ID:“88”，“值”：“有机物”
},
{
“类型ID”：“89”，“值”：“指定有机物”
}
];
函数getMyTemplate（数据）{
$div_Child.html（$.templates.popupchildrend.render（data））；
//将数据更改为staticdata以测试静态信息，我还将其设置为JSON.stringify（data），但结果仍然为空
}
/*这是调用我用于测试的外部函数的ajax*/
功能选择项（cControl、treeID、treeTrans）{
var parentID=treeID；
if（$（cControl）.parent（）.find（'ul'）。长度==0）{
$.ajax({
类型：“Post”，
url:“承包商”\u ws.asmx/web\u getChildren“，
async:true，
数据类型：“文本”，
数据：“{parentID:“+parentID+”，popupType:“+$”（“#hid_popupType”）.val（）+“}”，
contentType:“应用程序/json”，
成功：功能（数据）{
如果（data！=null）{//菜单项有子项
$（cControl）。在（“”）之后；
$div_Child=$（cControl）.parent（）.find（'div_Child'）；
$div_Child.hide（）；
getMyTemplate（数据）；
$div_Child.show（'slow'）；
}
},
错误：函数（xhr）{
警报（xhr.responseText）；
}
});
}
}

PopupChildren脚本（模板）：

$.templates（“PopupChildren”，“{{for}}{{Value}}
{{for}”；

示例ajax数据：

数据：“{”d:“{”类型：“{”BLS”，“TreeCode:“0130”，“TreeType:“OBJ”，“ParentID:”88，“Children:”[]，“TypeID:”89，“Value:”无机酸，未指定”，“Trans:”无机酸，未指定”，“Active_标志”：false}，{”类型：““BLS”，“TreeCode:”0131”，“TreeType:“OBJ”，“ParentID:”88，“Children:”，“Children:[]，“TypeID:”90，“Value:”含氯氧酸”，“Trans:”含氯含氧酸，“活性标志”：false}]}“

首先-您是否查看了页面上的“完整代码”选项卡？您可以运行该HTML页面作为测试和修改示例的起点

$。when（）

用于组合承诺。在上面的示例中，只有一个-因此您可以编写（无需使用

$。当时）：
但是为了让模板工作，当前语法是{{{if…}}{{/if}}
，对于{[for…}}}
也是如此
{{{{}}{{{{}/if}}
不正确。（另外还有一个额外的+
：'{{{{}/if}}}+
）
在您的简化模板中，您应该编写{{{for Children}}
-我想。{{for}}
本身不会做任何事情…
我找到了我遇到的问题的解决方案，它是我如何调用模板和在ajax中设置的参数的组合。以下是对我有效的解决方案：
$(function () { /* js ready function */
    lazyGetTemplate('PopupChildren');
});

/* this is the function that loads the template from the script */
function lazyGetTemplate(name) {
   var deferred = $.Deferred();
   if ($.templates[name]) {
       deferred.resolve();
   }
   else {
    $.getScript("/_Scripts/" + name + ".js").then(function () {
        if ($.templates[name]) {
            deferred.resolve();
        }
        else {
            alert("Script: \"" + name + ".js\" failed to load.");
            deferred.reject();
        }
    });
   }
 }

/* this is the ajax calling my additional items for display */
function selItem(cControl, treeID, treeTrans) {
var parentID = treeID;

if ($(cControl).parent().find('ul').length == 0) {
    $.ajax({
        type: "Post",
        url: "Contractor_ws.asmx/web_getChildren",
        async: true, 
        dataType: "JSON",
        data: "{parentID:" + parentID + ", popupType:'" + $('#hid_popupType').val() + "'}",
        contentType: "application/json",
        success: function (data) {
            if (data != null) { //menu item has children
                $(cControl).after("<div id=\"div_Child\"></div>");
                $div_Child = $(cControl).parent().find('#div_Child');
                $div_Child.hide();
                var myData = data.d;
                $div_Child.html($.templates.PopupChildren.render(myData));
                $div_Child.show('slow');
            }
        },
        error: function (xhr) {
            alert(xhr.responseText);
        }
    });
  }
}

/* this is the content of the actual script that gets called from the lazyGetTemplate() */
$.templates("PopupChildren", "<ul>{{for}}<li><a onclick=\"selItem(this,\'{{:TypeID}}\',\'{{:Value}}\');\">{{:Value}}</a>{{/for}}</ul>");

$（函数（）{/*js ready函数*/
lazyGetTemplate（“PopupChildren”）；
});
/*这是从脚本加载模板的函数*/
函数lazyGetTemplate（名称）{
var deferred=$.deferred（）；
如果（$.templates[名称]）{
延迟。解决（）；
}
否则{
$.getScript（“/\u Scripts/”+name+“.js”）。然后（函数（）{
如果（$.templates[名称]）{
延迟。解决（）；
}
否则{
警报（“脚本：\”“+name+”.js\“未能加载。”）；
拒绝（）；
}
});
}
}
/*这是ajax调用我的附加项进行显示*/
功能选择项（cControl、treeID、treeTrans）{
var parentID=treeID；
if（$（cControl）.parent（）.find（'ul'）。长度==0）{
$.ajax({
类型：“Post”，
url:“承包商”\u ws.asmx/web\u getChildren“，
async:true，
数据类型：“JSON”，
数据：“{parentID:“+parentID+”，popupType:“+$”（“#hid_popupType”）.val（）+“}”，
contentType:“应用程序/json”，
成功：功能（数据）{
如果（data！=null）{//菜单项有子项
$（cControl）。在（“”）之后；
$div_Child=$（cControl）.parent（）.find（'div_Child'）；
$div_Child.hide（）；
var myData=data.d；
$div_Child.html（$.templates.popupchildrend.render（myData））；
$div_Child.show（'slow'）；
}
},
错误：函数（xhr）{
警报（xhr.responseText）；
}
});
}
}
/*这是从lazyGetTemplate（）调用的实际脚本的内容*/
$.templates（“PopupChildren”和“{{for}}{{{:Value}}{{{/for}}”；

一些
function getMyTemplate() {
    lazyGetTemplate("PopupChildren")
        .done(function () {
            var html = $.templates.PopupChildren.render(data);
            $div_Child.html(html);
         });
}

$(function () { /* js ready function */
    lazyGetTemplate('PopupChildren');
});

/* this is the function that loads the template from the script */
function lazyGetTemplate(name) {
   var deferred = $.Deferred();
   if ($.templates[name]) {
       deferred.resolve();
   }
   else {
    $.getScript("/_Scripts/" + name + ".js").then(function () {
        if ($.templates[name]) {
            deferred.resolve();
        }
        else {
            alert("Script: \"" + name + ".js\" failed to load.");
            deferred.reject();
        }
    });
   }
 }

/* this is the ajax calling my additional items for display */
function selItem(cControl, treeID, treeTrans) {
var parentID = treeID;

if ($(cControl).parent().find('ul').length == 0) {
    $.ajax({
        type: "Post",
        url: "Contractor_ws.asmx/web_getChildren",
        async: true, 
        dataType: "JSON",
        data: "{parentID:" + parentID + ", popupType:'" + $('#hid_popupType').val() + "'}",
        contentType: "application/json",
        success: function (data) {
            if (data != null) { //menu item has children
                $(cControl).after("<div id=\"div_Child\"></div>");
                $div_Child = $(cControl).parent().find('#div_Child');
                $div_Child.hide();
                var myData = data.d;
                $div_Child.html($.templates.PopupChildren.render(myData));
                $div_Child.show('slow');
            }
        },
        error: function (xhr) {
            alert(xhr.responseText);
        }
    });
  }
}

/* this is the content of the actual script that gets called from the lazyGetTemplate() */
$.templates("PopupChildren", "<ul>{{for}}<li><a onclick=\"selItem(this,\'{{:TypeID}}\',\'{{:Value}}\');\">{{:Value}}</a>{{/for}}</ul>");