4

假设我有一个包含未知深度的嵌套数组的 json 对象。我想将每个数组提供给 _.template 函数。例如，我的 json 对象可能如下所示：

$start_elements = array (
        array(
            "elementTag"=>"li",
            "elementClass"=>"dashboard",
            "elementContent"=>array(
                "elementTag"=>"a",
                "elementContent"=>"Dashboard",
                "href"=>"#home"
                ) 
        ),
        array(
            "elementTag"=>"li", 
            "elementClass"=>"count indicator", 
            "elementContent"=>array(
                array(
                    "elementTag"=>"span", 
                    "elementClass"=>"data-count='8'", 
                    "elementContent"=>"Notifications"
                ), 
                array(
                    "elementTag"=>"ul", 
                    "elementClass"=>" ",
                    "elementContent"=>array(
                        "elementTag"=>"li", 
                        "elementContent"=>array(
                            "elementTag"=>"a",
                            "href"=>"#", 
                            "elementExtra"=>"data-modal",
                            "elementContent"=>array(
                                array(
                                    "elementTag"=>"h4",
                                    "elementContent"=>"Lorem Ipsum"
                                    ), 
                                array(
                                    "elementTag"=>"<p>",
                                    "elementContent"=>"Lorem ipsum dolor sit imet smd ddm lksdm lkdsm"
                                )
                            )
                        )
                    )
                )
            )
        )
);
json_encode($start_elements);

_。模板：

_.template('<<%= elementTag %> class="<%= elementClass %>" href="<%= href %>"><%= elementContent %></<%= elementTag %>')

数组的嵌套结构很重要，因为我想以相同的嵌套结构输出 html。例如，上面的对象会输出一个 li 对象，里面有一个锚标签。如何在保留此结构的同时将模板应用于每个嵌套数组？

4

2 回答 2

1

我会围绕您的模板制作一个包装器函数，以保持您的模板无逻辑。然后你可以使用 underscore 的实用方法来检查你手中是否有一个数组、对象（或字符串）（_.isArray和_.isObject）。

您需要将包装函数传递到模板中，以便使用它。您可以只_.extend使用{tmpl: tmpl}.

这是一个有效的示例，虽然是简化的：

    var data = {
    elementTag: "li",
    elementContent: [{
        elementTag: "a",
        elementContent: "Dashboard"
    }, {
        elementTag: "div",
        elementContent: "Hello"
    }]
};

var tmpl = _.template('<<%= elementTag %>><%= template(elementContent) %></<%= elementTag %>>');

function template(elData) {
    var html = "";
    if (_.isArray(elData)) {
        _.each(elData, function (el) {
            html += template(el);
        });
    } else if (_.isObject(elData)) {
        html = tmpl(_.extend({
            template: template
        }, elData));
    } else {
        html = elData;
    }
    return html;
}

console.log(template(data));
于 2013-01-14T03:22:23.017 回答
0

您可以执行以下操作：

函数应用模板（obj）{
  如果 _.has(obj, "elementContent"){
     obj.elementContent = applyTemplate(obj.elementContent)
  }
  return _.template("templateString", obj)
}

基本上，您遍历整个树并将elementContent其替换为自下而上的模板值。

于 2013-01-13T17:21:35.730 回答