jsView - Как отображать содержимое пользовательского тега с его реквизитами в качестве данных?

У меня есть собственный тег, который может быть внутренним тегом, и я хочу связать его props как data. Я могу изменить свойство title первого тега test и увидеть изменения, но не могу сделать это для внутреннего тега test. Я думаю, это из-за неправильных аргументов this.tagCtx.content.render(). Ниже приведен пример:

<!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>

jsviews
person S.M.Amin    schedule 25.04.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема здесь в том, что внутренний тег отображается как строка, а не как тег, связанный с данными, поскольку вызов this.tagCtx.content.render() просто вызывает метод рендеринга для скомпилированного шаблона, соответствующего содержимому блока.

Если вы хотите отобразить тег, связанный с данными, вам нужно вызвать this.tagCtx.render().

Кроме того, при вызове this.tagCtx.render() вам нужен тег для отображения его содержимого, а не другого шаблона. Установка template: "#testTemplate" заставит тег использовать этот шаблон вместо контента. Итак, вам нужно что-то в этом роде:

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);
        }
    }
});

Вы, вероятно, не хотите передавать tagCtx в качестве контекста в вызове template.render(...). Вы можете передать tagCtx.ctx или просто undefined...

person BorisMoore    schedule 25.04.2013
comment
Теперь #parent.data работает, а ~root нет. Я спросил это здесь - person S.M.Amin; 26.04.2013