-1

APIを呼び出して、jsonオブジェクトを返すと、コンテンツでいっぱいのdivが大量に生成されます。しかし、私はオブジェクトのプロパティを挿入するために連結を使い続けています。それへのより良い方法はありますか？

$.each(JSON, function(key, value) { 
  var content = display_mention(value);
  $("#mentions_container").append(content);
    });

    function display_mention(mention) {
       //this str will be much more complex and use lots of concatenation
   var str = "<div data-id='" + mention.id +"'> " + mention.texto + "</div></br>";
   return str;
    }
4

3 に答える 3

1

より良い方法があり、それはクライアントサイドテンプレートと呼ばれます。

mustache.jshttps://github.com/janl/mustache.jsまたはhandlebars.jshttp://handlebarsjs.com/を見 てください

于 2012-10-24T11:04:37.763 に答える
1

私はこの男をマイクロテンプレートエンジンとして使うのが好きです：

String.prototype.tpl = function(o) {
    return this.replace(/{([^{}]*)}/g,
        function(a, b) {
            var r = o[b];
            if (!o[b]) return "";
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

var data = {
  title: 'C pocket reference',
  type: 'PDF Document',
  tag: 'programming',
  created_at: '5.31.2010'
}

var html = '<tr><td>{title2}</td><td>{type}</td><td><a href="tags/{tag}">{tag}</a></td><td>{created_at}</td></tr>'.tpl(data);

非常にシンプルですが、コードがよりクリーンになります。

ただし、 jQueryテンプレート（jQueryを使用するサイン）のようなより深刻なソリューションを検討するか、ここから他のソリューションを選択する必要がありますhttp://microjs.com/#templating

于 2012-10-24T11:05:13.933 に答える
0

より大きなエンジンが必要ない場合は、単純なテンプレート関数を作成できます。

function template(str, context) {
    return str.replace(/\{([a-z]+)\}/g, function(match, key) {
        return context[key];
    });
}

次のようなオブジェクトコンテキストで呼び出すだけです。

template("<div data-id='{id}'> {texto}</div></br>", mention);
于 2012-10-24T11:13:19.407 に答える