jsView - How to render the content of a custom tag with its props as its data?

Question

I have custom tag which can have itself as an inner tag and I want to bind it its props as data. I can change the first test tag title property and see the change but cannot do that for the inner test tag. I think it is because of the wrong arguments of this.tagCtx.content.render(). Below is the example:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jsrender.js" type="text/javascript"></script>
<script src="js/jquery.observable.js" type="text/javascript"></script>
<script src="js/jquery.views.js" type="text/javascript"></script>

<script id="testTemplate" type="text/x-jsrender">
    <div>{^{>title}}{^{:content}}</div>
</script>

<script id="myTemplate" type="text/x-jsrender">
    {^{test title='Test1'}}
        {^{test title='Test2'}}
        {{/test}}
    {{/test}}
</script>

<script type="text/javascript">
    $.views.tags({
        test: {
            render: function(){
                this.tagCtx.props.content = this.tagCtx.content.render();
                return this.template.render(this.tagCtx.props, this.tagCtx, this.tagCtx.view);
            },

            template: "#testTemplate"
        }
    });

    $.templates({myTemplate: "#myTemplate"});

    $(function () {
        $.link.myTemplate('#container', {});

        $('#editTitle').click(function () {
            $.observable($.view('#container div:first div').data).setProperty('title', prompt());
        });
    });
</script>
</head>
<body>
    <span id="editTitle">EditTitle</span>
    <div id="container"></div>
</body>
</html>

score 1 · Accepted Answer · answered Apr 25 '13 at 18:26

The problem here is that the inner tag is being rendered as a string, not as a data-linked tag, since the this.tagCtx.content.render() call is simply calling the render method on the compiled template corresponding to the block content.

If you want to render as a data-linked tag, you need to call this.tagCtx.render().

In addition, in calling this.tagCtx.render() you need the tag to render its content, and not another template. Setting template: "#testTemplate" will cause the tag to use that template instead of the content. So what you need is something along these lines:

var template = $.templates("#testTemplate"); 

$.views.tags({
    test: {
    render: function() {
            var tagCtx = this.tagCtx;
            tagCtx.props.content = tagCtx.render();
            return template.render(tagCtx.props, undefined, tagCtx.view);
        }
    }
});

You probably don't want to pass in tagCtx as context in the template.render(...) call. You can pass in tagCtx.ctx, or simply undefined...

Now `#parent.data` works but `~root` does not. I asked it [here](http://stackoverflow.com/questions/16238589/jsview-in-contrast-to-parent-data-root-does-not-work) — S.M.Amin, Apr 26 '13 at 14:12

jsView - How to render the content of a custom tag with its props as its data?

1 Answers1