自定义绑定html jquery

Question

我需要完成类似以下的事情......

我的 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){    

}})

Answer 1

您可以使用一些 $.fn.renderMyJSON() 来执行此操作，但存在 _.template、handlebars 等模板引擎是有原因的。

我使用 .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);
})

Answer 2

Underscore.js 有一个很棒的 _.template 函数，我建议您使用它，但您可以在下面解决它：

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

Answer 3

我要做的是将 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);
});