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

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

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

источник

2013-04-25 S.M.Amin

Проблема здесь состоит в том, что внутренний тег визуализируется в виде строки, а не в качестве метки данных, связаны между собой, так как 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 ...

источник

2013-04-25 18:26:36 BorisMoore

Спасибо, теперь он работает. –

Теперь '# parent.data' работает, но' ~ root' не делает. Я спросил его [здесь] (http://stackoverflow.com/questions/16238589/jsview-in-contrast-to-parent-data-root-does-not-work) –

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

ответ

Смежные вопросы