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

テンプレートをロジックレスに保つために、テンプレートの周りにラッパー関数を作成します。次に、アンダースコアのユーティリティメソッドを使用して、配列、オブジェクト（または文字列）（_.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

次のことができます。

関数 applyTemplate(obj){
  if _.has(obj, "elementContent"){
     obj.elementContent = applyTemplate(obj.elementContent)
  }
  return _.template("テンプレート文字列", obj)
}

elementContent基本的に、ツリー全体を調べて、下から上に向かうテンプレート値に置き換えます。

于 2013-01-13T17:21:35.730 に答える