Dynamic components creation

HaQuery allows you to create component instances on the fly. For that you can use list component on the server and factory on the client.

Creation components on the server

Part of the template.html file:

<haq:list id="list">
    Place here any html code including components. For example:
    <div id="item">
        {preText}
        <haq:literal id="text" />
        {postText}
    </div>
</haq:list>

Part of the Server.hx file:

template().list.bind([
      { preText:"Abc", postText:"Def" }
    , { preText:"123", postText:"456" }
], function(item, data) {
    // here you can customize created html piece
    var div = item.q("#item");
    var text = item.components.get("text");
});

Creation components on the client

Use factory component to create components one by one.

Part of the template.html file:

<haq:factory id="factory">
    Place here any html code including components. For example:
    <div id="item" class="item">
        {preText}
        <haq:literal id="text" />
        {postText}
    </div>
</haq:dynamicfactory >

Part of the Client.hx file:

var item = template().factory.create(
      q("#container") // node to attach created html block
    , { preText:"Abc", postText:"Def" }
);
var div = item.q("#item");
var text = item.components.get("text");

version #218, modified 2013-10-03 16:59:57 by yar3333