5

ajax 経由でサーバーにクエリを実行する以下のメソッドがあり、JSON データが返され、データをループして html に書き出します。

コードは機能しますが、面倒で非効率的です。私のjavascriptコードに書き出すのではなく、HTMLをある種のテンプレートに入れる方法はありますか?

ありがとう

 $("[name=btnSearch]").on("click", function () {   
   $.getJSON(ajaxMethod + searchTerm, function (data) {
        var html = "";
        var sel = "";
        var name = "";
        var type = "";
        //alert(id);
        var css = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
        $.each(data, function (key, val) {
                sel = val.ID;
                name = val.DisplayName;
                type = "user";
            html += '<tr data-type = "' + type + '" data-result-title = "' + name + '" data-result-id="' + sel + '">';
            html += '<td id="' + sel + '">' + name + '</td>';
            html += '<td><input type="button" class="select" value="select" style="' + css + '"></td>';
            html += '</tr>';
        });
        //html += '<tr><td style="padding-top: 4px;">&nbsp;</td><td style="padding-top: 4px;"><input id="btnAddMembers" type="button" value="Add Members" /></td></tr>';
        $(html).appendTo('[name=' + div + ']');
    });
 });
4

4 に答える 4

5

この質問は、基本的にあなたが探していることを行います（プラグインなしで、プロトタイプオブジェクトに追加のメソッドを追加することによって）。

ここで受け入れられた回答を読んでください: 2012 年の推奨 jQuery テンプレート?

基本的な JSFiddle はこちら: CLICK

非常にシンプルで、編集と拡張が容易な JSfiddle を使用すると、どのように機能するかがよくわかるはずです。

コード：

HTML:

<script type="text/template" id="cardTemplate">
<div>
    <a href="{0}">{1}</a>
</div>
</script>

<div id="container"></div>

JS:

String.prototype.format = function() {
  var args = arguments;
  return this.replace(/{(\d+)}/g, function(match, number) { 
    return typeof args[number] != 'undefined'
      ? args[number]
      : match
    ;
  });
};

var cardTemplate = $("#cardTemplate").html();
var template = cardTemplate.format("http://example.com", "Link Title");
$("#container").append(template);
于 2013-07-26T14:57:12.050 に答える
1

ノックアウトを使ってみませんか？

これは jsFiddle と exampleです。

HTML

<input id="searchBtn" type="button" value="Search" data-bind="click: SearchItems" />
<table data-bind="foreach: Items">
    <tr data-type="user" data-bind="attr: { 'data-result-title':DisplayName(), 'data-result-id':Id() }">
        <td data-bind="text: DisplayName()"></td>
        <td>
            <input type="button" class="select" value="select" style="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
        </td>
    </tr>
</table>

Javascript

var id = 0;

function Item(id, name) {
    var self = this;
    self.Id = ko.observable(id);
    self.DisplayName = ko.observable(name);
}

function ItemsModel() {
    var self = this;
    self.Items = ko.observableArray([]);
    self.SearchItems = function () {
        self.Items.push(new Item(id++, 'Some Name ' + id));
    }
}

$(function () {
    ko.applyBindings(new ItemsModel());
});
于 2013-07-26T15:15:01.453 に答える