Domplate——制作firebug插件之5

本文主要参考了

http://www.softwareishard.com/blog/firebug-tutorial/extending-firebug-domplate-part-v/

下图是这章要制作的效果，按下“按钮标签”之后，会在下面输出“消息 Thu...”，点击消息，还会弹出一个窗口。

首先增加一个domplate变量

var helloWorldRep = domplate(
{
    myTag:
        DIV({class: "MyDiv", onclick: "$onClick"}, //定义了该DIV的一些属性
            SPAN($HW_STR("helloworld.message")),//以下是DIV包含的内容
            SPAN(" "),
            SPAN("$date")
        ),

    onClick: function(event)
    {
        alert("Hello World!");
    }
})

这个变量是一个div，其中div中包含了动态数据$date，date这里可以不定义，也可以在这里定义，同样onClick也是。这个div输出的html大概是下面这样：

<DIV class="MyDiv">
    <SPAN>Hello World!>
    <SPAN> </SPAN>
    <SPAN>Wed, 04 Jun 2008 11:06:28 GMT</SPAN>
</DIV>

接着再把domplate实例加入视图中

onMyButton: function(context)
{
    var panel = context.getPanel(panelName);
    var args = {
        date: (new Date()).toGMTString()
    };
    var root = helloWorldRep.myTag.append(args, panel.panelNode, null);

//var root = helloWorldRep.myTag.append({}, panel.panelNode, helloWorldRep);

//var root = helloWorldRep.myTag.append({}, panel.panelNode, null);
},

panelNode :

We are using panel's member variable panelNode, which represents content area of the panel - final HTML will be inserted into it. Notice that we are using getPanel function to get our panel for the current context (page) where panelName represents ID of the panel, see part II.

append接口的声明大概为：append(arg1, arg2, arg3)

This method has three parameters. The first one is used to provide data for the template. The second is the parent DOM node and the last represents context object (this) that contains callback methods (data providers and event handlers). It can be null in our case as we don't have any callbacks yet, but it's good practice to use the template itself. It's usually the template which defines all these callbacks. Return value is root element of the created DOM (we don't need it for now).

args中包含了对date的定义，用于传给后面的myTag。

这里对date和onClick的寻找顺序是按 arg1 -> arg3 -> helloWorldRep本身，也就是说date和onClick只要存在arg1、arg3或者helloWorldRep的定义里面就行了。

值得注意的是：

• arg1可以写{}，但不可写null
• arg3可以些null，但不可写{}

关于append的定义，后面估计还要详细查一下