Question

我正在尝试创建一个模板（一个返回HTML字符串的函数），它使jqGrid位于其中间。问题：jqGrid需要一个现有的元素才能工作，但显然在字符串本身执行之前运行的字符串函数（？）：

var member_tpl = function(obj){
    return '<div class="meta"> \
        <div class="left"> \
            yada yada \
        </div> \
        <div id="jqGridHerePlease22"></div> \
            '+ createGrid(someObject,"jqGridHerePlease22") +' \
        </div><!-- end class meta --> \
    ';
};

$('.buttonClick').live('click', function(e){
    e.preventDefault();
    writeTemplate('aDialog', member_tpl);
});

我的createGrid函数工作。问题是尝试在字符串中使用它。基本上，如果我用下面的代码编写一个警报，它就不会起作用，因为字符串中的函数在写入字符串之前运行...我想：

alert($("member_locations22").value)

请原谅我，如果我错过了某个地方的答案并且正在提出重复的问题。建议？

编辑：@John Kalberer，这是createGrid函数中发生的事情：

var createGrid = function(gridData,div){
    var details = $.extend({ gridData },default_grid_settings);
    var rand = randomNum();
    var pager = 'pager'+rand;
    var str = '<div id="'+pager+'"></div>';

    var grid = $('#'+div).append('<table id="aGrid'+rand+'"></table>'+str).find('#aGrid'+rand); 
    var grid_args = $.extend({pager: '#'+pager},details);
    grid.jqGrid(grid_args);  // grid with pager created here
};

所以createGrid所做的就是实际制作网格。

Answer 1

问题是，如果DOM中尚不存在id，则无法使用给定的id创建网格。看来如果你真的希望网格成为模板的一部分，你需要将HTML添加到DOM，插入网格，并获得你想要的innerHTML。

Answer 2

您实际上是在响应中包含函数的返回值，而不是函数本身。如果要包含函数本身，则需要将其括在<script> ... </script>标记中并使其成为字符串。

警告：根据浏览器及其在页面中的包含方式（document.write或innerHTML），脚本可能无法按您的意图执行。相反，您可能不需要在字符串中包含脚本，而是在DOM准备好之后使用timer或onload事件来执行代码。确保在所有主流浏览器中进行测试。

Answer 3

我认为这对你有用。我试图避免更改您的功能签名。此代码尚未经过测试，因此您可能需要通过更改member_tpl将元素附加到dom，以传入已附加的父元素。然后，不是在member_tpl中返回newGrid，而是在创建它之后附加它。

var member_tpl = function (obj) {
    var newGrid = $('<div class="meta"> \
    <div class="left"> \
        yada yada \
    </div> \
    <div id="jqGridHerePlease22"></div> \
    </div><!-- end class meta --> \
    '
    );
    createGrid(someObject, newGrid.find("#jqGridHerePlease22"));
    return newGrid;
};
var createGrid = function(gridData, div){
    var details = $.extend({ gridData },default_grid_settings);
    var rand = randomNum();
    var pager = 'pager'+rand;
    var str = '<div id="'+pager+'"></div>';

    var grid = div.append('<table id="aGrid'+rand+'"></table>'+str).find('#aGrid'+rand); 
    var grid_args = $.extend({pager: '#'+pager},details);
    grid.jqGrid(grid_args);  // grid with pager created here
};

$('.buttonClick').live('click', function (e) {
    e.preventDefault();
    writeTemplate('aDialog', member_tpl);
});

在返回字符串中调用JS

3 个答案: