0

次のようなものを達成する必要があります...

私のhtmlは

<div id="targetdiv">
<div class="Comments30" title="{@something1}"></div>
<div class="{@something2}" title="{@something3}"></div>
<div class="Comments30" title="{@something4}"></div>
</div>

私のjsonは

var myJson=
{
something1 : value1
something2 : value2
something3 : value3
something4 : value4
}

そして、jqueryのようにそれらをバインドしたい

$('#targetdiv').bindMyJSON(myJson);

どうすればこれを達成できますか。私はそれが次のようなものになることを知っています

jQuery.fn.extend({
bindMyJSON : function(json){    

}})
4

3 に答える 3

0

Underscore.js には、_.template私が使用することをお勧めする優れた機能がありますが、以下にそれを解決できる 1 つの方法があります。

makeTemplate変数を補間する関数を生成する関数です。テンプレート文字列を渡すと、オブジェクトで呼び出されたときにプロパティを補間する関数が生成されます。最初にテンプレートを処理する方が、毎回検索して置き換えるよりも一般的に効率的です。

var makeTemplate = (function() {
  var escapeMap = {
    '\n'      : '\\n', 
    '\"'      : '\\\"',
    '\u2028'  : '\\u2028',  // line separator
    '\u2029'  : '\\u2029'   // paragraph separator
  };

  return function (templateString) {
    // Escape Special Characters
    templateString = templateString.replace(/["\n\r\u2028\u2029]/g, function(index) {
      return escapeMap[index];
    });

    // Replace interpolation ({@foo}) variables with their object counterpart.
    templateString = templateString.replace(/\{@(\w+)\}/g, '" + (obj["$1"] || "") + "');

    // Return template function.
    return new Function('obj', 'return "' + templateString + '";');
  };
}());

関数を作成したら、テンプレート関数をmakeTemplate定義して作成できます。html

var html = '<div id="targetdiv"><div class="Comments30" title="{@something1}"></div><div class="{@something2}" title="{@something3}"></div><div class="Comments30" title="{@something4}"></div></div>';

var template = makeTemplate(html);

テンプレート関数を取得したら、テンプレート関数を呼び出すことができます。

var interpolatedHtml = template({
  something1 : "value1",
  something2 : "value2",
  something3 : "value3",
  something4 : "value4"
});
于 2013-11-07T08:12:28.460 に答える
0

私がすることは、myJson のキー名をクラス属性として div 要素に割り当て、クラス名が静的で一意であると仮定して、要素に対応する値を割り当てる targetDiv コレクションを反復処理することです。

html

<div id="targetDiv">
    <div class="something1"></div>
    <div class="something2"></div>
    <div class="something3"></div>
</div>

js

var container = $("#targetDiv");
$.each(myJson, function(key, value)
{
  container.filter("." + key).attr("title", value);
});
于 2013-11-07T08:30:00.787 に答える
0

$.fn.renderMyJSON() でこれを行うこともできますが、_.template、ハンドルバーなどのテンプレート エンジンが存在するのには理由があります。

.replace() を使用していくつかの基本的な renderByJson() プラグインをいじりましたが、これは置換する文字列の最初に見つかった出現のみを置換することに注意してください: http://jsfiddle.net/6dece/

基本的なコードは次のようになります。

jQuery(function($) {
    $.fn.renderMyJSON = function(json) {
        var $el = $(this);

        $.each(json, function(key, val) {
            $el.html($el.html().replace('{@' + key + '}', val));
        });
    };


    var json = $.parseJSON('{"something1" : "value1","something2" : "value2","something3" : "value3","something4" : "value4"}');

    $('#targetdiv').renderMyJSON(json);
})
于 2013-11-07T08:33:51.743 に答える