オブジェクトのhtmlテンプレートを作成する

Question

学生コースをリスト/グリッドなどのHTML要素に追加できるWebページを作成しています。私は何が最もうまくいくかを決めていない。

私はbootstrap3-typeahead.jsを使ってコースを見つけましたが、買い物カゴのようなバスケットに「コースアイテム」を「追加」したいものを1つ選択すると、私はこれのためにhtmlテンプレートを使うことができると聞いてきましたが、私はグーグルを検索するか、ここで良い例を見つけることができません。

は今、私は属性を持つオブジェクトのリスト（1360アイテム）をロードしています

• （1から1360に至るまで）コースID
• コース番号
• コース名
• コース教師
• コースキーワード

私はこのコースの私が欲しいですコース概要をお伝えください。

は今、私はちょうど私が作った<ul>から<li>要素として、それらを追加するには、以下を使用します。私はこのような何かを描きます。私が追加されたすべての単一のアイテム、デュポン社のために行われることになるテンプレートのいくつかの並べ替えに変数を適用することができるという想像

：この、その結果

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

要するに$("#basket").loadTemplate(<template name>, item.name, item.number etc..)

：

私はjavascriptを/ jQueryを使って、これがどのように行われるか、可能な場合を制御できる要素を作成するために、HTMLテンプレートを使用していくつかの方法があるかどうかを知りたいですか？

ありがとうございます！

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 
})