0

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 ":間違い}]}"

4

2 に答える 2

0

私が抱えていた問題の解決策を見つけました。それは、テンプレートの呼び出し方法と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>");

この特定の jQuery for js/jsRender 初心者向けの実装中に学んだことに関する特定のメモ。テンプレートが呼び出される前に、テンプレートがページにロードされていることを確認する必要がありました。テンプレートにデータを渡すときに、「data.d」も参照する必要がありました。通話データが十分ではありませんでした。また、ajax データに混乱し、表示しようとしている項目が Children という配列内にあると考えたときに貴重な時間を無駄にしましたが、そうではないことがわかりました。この作業を行う最後の 2 つの要素は、async を true に設定し、dataType を "JSON" に設定する必要があったことです。特にdataTypeについては、それを機能させるために「テキスト」に設定することについて言及している別の投稿があり、私の問題は適用できませんでしたが、将来誰かを助けるかもしれません。最後に、具体的にはテンプレート スクリプト自体についてですが、for ステートメントで実際の項目名をリストする必要はありませんでした。私が見たいくつかの例に基づいて、 {{for data}} または {{for Children}} を配置する必要があると考えましたが、最後に data.d を渡したので、単に {{for} を呼び出すだけだと思いますで十分でした。

于 2013-11-15T14:29:41.573 に答える