开发者

jQuery template issue, how to output tmpl output (with event hooks) from another tmpl

开发者 https://www.devze.com 2023-03-31 19:48 出处:网络
I\'m working on a complex application that runs in a browser, but to simplify the problem I have, I\'ve create a really simple example showing you the issue. Please don\'t answer this question by tell

I'm working on a complex application that runs in a browser, but to simplify the problem I have, I've create a really simple example showing you the issue. Please don't answer this question by telling me to change the whole set-up.

What I really need is to know is if it can be done the way I'm trying to do it, and if the answer is no, I'll go back and figure out what to do instead.

Link to zip with example

I'm trying to do a "top down" approach to rendering, and start off with the smallest element, render that, return the result to the parent, then render the parent (with the content returned from the children).

/* Render method on Child object*/
Render: function () {
    var renderedContent = $("#ChildTemplate").tmpl({ "Name": this.Name });
    renderedContent.find(".clickable").click(function (e) { console.log("child"); return false; });
    return renderedContent;
}

If I took renderedContent and appended it to any DOM object, the click event would trigger my code, but then when I take this content and push it back into a template, I can't figure out how to get it working (if it's possible). The render method of the parent:

Render: function () {
    var subContent = [];
    $.each(this.children, function (index,开发者_如何学JAVA element) {
        subContent[subContent.length] = { "Content": element.Render() };
    });

    var renderedContent = $("#ParentTemplate").tmpl({ "Name": this.Name, "SubContent": subContent });
    renderedContent.find(".parentclick").click(function (e) { console.log("parent"); return false; });
    return renderedContent;
}

Now the click event on the parent works, but not the children. My best guess is that this line is what ruins the event hooks:

        <tr><td>{{html Content.html()}}</td></tr>

But is there any way of putting a jQuery object (which I assume is being returned from the tmpl method) into the output without loosing the event hooks?

Unfortunately it's not an option trying to hook up the events after I'm done rendering, as the end result will contain hundreds of elements and I need them to be wired to correct "parent" object.

0

精彩评论

暂无评论...
验证码 换一张
取 消