[mayaa-user:424] Re: echo と insert の相性

2007年 1月 20日 (土) 16:45:22 JST

suga です。

On 1/20/07, yamada <yamada ＠ vest.co.jp> wrote:
> echo の中で id を書き換えたのがまずいのかと思いましたが、id の変更がある無しにかかわらず再現しました。
> echo のある無しが重要なようです。

メールの中に書かれていない部分に原因があるようです。
下記のような形で、おそらく意図したとおりになると思います。


index.html----------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Welcome!</title>
    <style type="text/css"><!--
        div { margin-left: 16px; }
    --></style>
</head>
<body>
    <span id="root">dummy</span>
</body>
</html>

index.mayaa----------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<m:mayaa xmlns:m="http://mayaa.seasar.org">
    <m:beforeRender><![CDATA[
        var rootNode = { /* データは文末に */ }
    ]]></m:beforeRender>

    <m:insert id="root" path="/treeNode.html" name="tree" node="${
rootNode }" />
</m:mayaa>

treeNode.html----------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>treeNode component</title>
</head>
<body>
<div id="treeComponent">
<div id="treeNode">
    -<span id="nodeLabel">ラベル</span>
    <div id="childLoop">
        <div id="childNode">子ノード</div>
    </div>
</div>
</div><!-- end of treeComponent -->
</body>
</html>

treeNode.mayaa----------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<m:mayaa xmlns:m="http://mayaa.seasar.org">
    <m:doRender id="treeComponent" name="tree" />

    <m:echo id="treeNode">
        <m:attribute name="id" value="treeNode_${ binding.node.id }" />
    </m:echo>
    <!-- ↓のreplace="false"は結果簡略のため省略 -->
    <m:write id="nodeLabel" value="${ binding.node.label }" />
    <!-- ↓のreplace="false"は意図した結果の邪魔だと考えて削除 -->
    <m:forEach id="childLoop" items="${ binding.node.children }" var="child" />
    <m:insert id="childNode" path="/treeNode.html" name="tree"
node="${ child }" />
</m:mayaa>

結果(空白など調整済み)---------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Welcome!</title>
    <style type="text/css"><!--
        div { margin-left: 16px; }
    --></style>
</head>
<body>
    <div id="treeNode_R">
        -Root
        <div id="treeNode_N1">
            -Node1
            <div id="treeNode_N1_C1">
                -Child1
                <div id="treeNode_N1_C1_L1">
                    -Leaf1
                </div>
                <div id="treeNode_N1_C1_L2">
                    -Leaf2
                </div>
            </div>
            <div id="treeNode_N1_C2">
                -Child2
            </div>
        </div>
        <div id="treeNode_N2">
            -Node2
            <div id="treeNode_N2_C3">
                -Child3
                <div id="treeNode_N2_C3_L3">
                    -Leaf3
                </div>
            </div>
            <div id="treeNode_N2_C4">
                -Child4
                <div id="treeNode_N2_C4_L4">
                    -Leaf4
                </div>
            </div>
        </div>
        <div id="treeNode_N3">
            -Node3
        </div>
    </div>
</body>
</html>


index.mayaaで省略したデータ----------------------------------------
var rootNode = {
        'id': 'R',
        'label': 'Root',
        'children' : [
            {
                'id': 'N1',
                'label': 'Node1',
                'children' : [
                    {
                        'id': 'N1_C1',
                        'label': 'Child1',
                        'children' : [
                            {
                                'id': 'N1_C1_L1',
                                'label': 'Leaf1',
                                'children' : []
                            },
                            {
                                'id': 'N1_C1_L2',
                                'label': 'Leaf2',
                                'children' : []
                            },
                        ]
                    },
                    {
                        'id': 'N1_C2',
                        'label': 'Child2',
                        'children' : []
                    },
                ]
            },
            {
                'id': 'N2',
                'label': 'Node2',
                'children' : [
                    {
                        'id': 'N2_C3',
                        'label': 'Child3',
                        'children' : [
                            {
                                'id': 'N2_C3_L3',
                                'label': 'Leaf3',
                                'children' : []
                            },
                        ]
                    },
                    {
                        'id': 'N2_C4',
                        'label': 'Child4',
                        'children' : [
                            {
                                'id': 'N2_C4_L4',
                                'label': 'Leaf4',
                                'children' : []
                            },
                        ]
                    },
                ]
            },
            {
                'id': 'N3',
                'label': 'Node3',
                'children' : []
            },
        ]
};

-- 
suga ( ko.suga ＠ gmail.com )