Question

我正在使用JQuery模板功能在html文件中呈现我的模板。我已经通过以下方式加载了库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script src="../static/js/Dashboard.js"></script>

当我在元素上调用空方法后跟$（...）。tmpl（...）。appendTo时，它不显示任何内容并给出错误：

TypeError：$（...）。tmpl（...）。appendTo不是函数

但是，如果我使用innerHTML或手动将变量设置为空字符串，则会显示旧数据以及更新的数据。

你能告诉我我的代码有什么问题：

(function(){
GetList();

$('#btnUpdate').click(function() {
$.ajax({
    url: '/updateList',
    data: {
        title: $('#editTitle').val(),
        description: $('#editDescription').val(),
        id: localStorage.getItem('editId')
    },
    type: 'POST',
    success: function(res) {
        $('#editModal').modal('hide');
        // Re populate the grid
        GetList();
    },
    error: function(error) {
        console.log(error);
    }
});
});
});

function GetList() {
$.ajax({
    url: '/getList',
    type: 'GET',
    success: function(res) {
        var listObj = JSON.parse(res);
        $('#ulist').empty();
            // var list = '';
        $('#listTemplate').tmpl(listObj).appendTo('#ulist');

    },
    error: function(error) {
        console.log(error);
    }
});
}

单击更新按钮后输入新数据时，应在html模板中更新此新数据

Answer 1

来自this documentation的示例：

$.tmpl( $("#listTemplate").html(), listObj ).appendTo( "#target" );

基本上是一个大纲：

$.tmpl( myTemplate, myData ).appendTo( "#target" );

第一个参数是模板作为字符串，第二个参数是你的json对象，然后以这种方式附加结果。

为什么我的jQuery脚本中没有找到appendTo方法？

1 个答案: