为对象创建html模板

Question

我正在创建一个能够将学生课程添加到列表/网格或任何类型的html元素的网页。我还没有决定哪种方法效果最好。

我通过使用bootstrap3-typeahead.js找到这些课程，当我选择其中一个时，我想“添加”一个“课程项目”到某种篮子 - 就像一个购物篮。我听说可以使用html模板，但我似乎无法通过搜索谷歌或在这里找到任何好的例子。

现在我已经加载了一个包含属性的对象列表（1360项）：

• 课程ID（范围从1-1360）
• 课程编号
• 课程名称
• 课程老师
• 课程关键字

我希望这个课程项目是课程的概述。我的照片是这样的：

现在我只需使用以下内容将<li>元素添加到我已制作的<ul>。

$("#basket").append('<li>' + item.name + ', ' + item.number + '</li>');

结果如下：

我想象能够将变量应用到某种模板，这些模板将针对添加的每个项目进行，e.i。 $("#basket").loadTemplate(<template name>, item.name, item.number etc..)

简而言之：

我想知道是否有某种方法可以使用html模板创建我可以使用javascript / JQuery控制的元素，如果可能的话，这是如何完成的？

谢谢！

Answer 1

是的，您可以创建“模板”功能

//example

var myBox = createBox("computer science", "0122", "programming, databases")

$(".myCourseList").append(myBox)

function createBox(courseName, courseId, courseClasses){
    var html = "";
    html += "<div class='courseBox'>" +
        "<p class='courseName'>" + courseName + "</p>" +
        "<p class='courseId'>" + courseId+ "</p>" +
        "<p class='courseClasses'>" + courseClasses + "</p>" +
        "<p class='xOut'>X</p>" +
        "</div>"
    return html;
}

当然，您需要一个完整的库来存储拖动内容，但以后将其作为一项不同的任务。 我忽略了CSS样式，但你会像往常一样做CSS。只需编写与代码中的类相对应的类。

现在，当您动态创建元素时，重要的是delegate绑定。

$(".myCourseList").on("click", "p.xOut", function(){
    $(this).closest(".courseBox").remove(); //edited this line
})