jsRender テンプレートを使用するように Web サイトをアップグレードしようとしています (以前は jTemplates を使用していました)。jsRender (Boris のサイトと John Papa によって作成された資料の両方) を研究しており、次の手順に従っています: JSViewsRemoteLoadTemplates
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>
PopupChildren スクリプト (テンプレート):
$.templates("PopupChildren", "<ul>{{for}}<li><a onclick='selItem(this,'{{:TypeID}}','{{:Value}}');'>{{:Value}}</a></li>{{/for}}</ul>");
サンプル ajax データ:
データ: "{"d":[{"__type":"BLS","TreeCode":"0130","TreeType":"OBJ","ParentID":88,"Children":[],"TypeID" :89,"Value":"INORGANIC ACIDS, UNSPECIFIED","Trans":"INORGANIC ACIDS, UNSPECIFIED","Active_Flag":false},{"__type":"BLS","TreeCode":"0131"," TreeType":"OBJ","ParentID":88,"Children":[],"TypeID":90,"Value":"塩素含有オキシ酸","トランス":"塩素含有オキシ酸","Active_Flag ":間違い}]}"