jsView - 與＃parent.data不同，〜root在這種情況下不起作用

以下是#parent.data工作原理和第一個標題可以更改的示例。但是當#parent.data被替換爲~root,test2標記未被呈現。jsView - 與＃parent.data不同，〜root在這種情況下不起作用

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <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="test1Template" type="text/x-jsrender"> 
     <div>{^{>title}}{{:content}}</div> 
     {{test2}} 
     <h1>{^{>#parent.data.title}}</h1> 
     {{/test2}} 
    </script> 

    <script id="myTemplate" type="text/x-jsrender"> 
     {^{test1 title='Test Title 1'}} 
     {^{test1 title='Test Title 2'}} 
     {{/test1}} 
     {{/test1}} 
    </script> 

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

      test2: function() { 
       return this.tagCtx.render(); 
      } 
     }); 

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

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

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

<div id="container"></div> 
</body> 
</html>

來源

2013-04-26 S.M.Amin

~root是您最初傳入的數據對象或數組的引用 - 頂級數據。這不是直接的父母數據。在你的情況下〜根將是{}您通過link.myTemplate()調用通過。後來

更新加入：（響應於在下面的評論質疑約〜根）

從視圖中，當任何塊標籤內容呈現JsViews點，這也是一個「視圖」 - ，其中一個模板是針對數據呈現的。視圖構成一個層次結構，而頂層視圖是以〜root形式顯示數據的視圖。所以如果你想爲中間級別的數據提供特殊的簡捷別名，你可以這樣做，但這是你要做的。聲明性地按照this example完成。在你的情況，你所呼叫的中間級模板渲染程序，讓您可以通過提供一個參考的上下文變量做等價的：

return $.templates.test1.render(
    this.tagCtx.props, 
    {mydata: this.tagCtx.props}, 
    this.tagCtx.view);

現在你可以寫

<script id="test1Template" type="text/x-jsrender"> 
    <div>{^{>title}}{{:content}}</div> 
    {{test2}} 
    <h1>{^{>~mydata.title}}</h1> 
    {{/test2}} 
</script>

來源

2013-04-26 21:20:30 BorisMoore

我想'〜根'是模板的根源。有沒有計劃指定一個變量，它是模板渲染的根數據。爲了清楚起見，我想訪問模板的渲染數據。這裏是'this.tagCtx.props'。我希望它與每個模板成比例，並且我想避免出現錯誤的「父」參考。例如，在選擇'＃parent.parent.data'或'＃parent.parent.parent.data'之間。我在我的模板中多次使用這種根數據。謝謝。 – 2013-04-27 06:07:53

再次感謝。除了你的解決方案，我嘗試在'{{include〜mydata =＃data}}'標籤中包裝我的模板，它的工作原理。但你的解決方案更清潔。 – 2013-04-29 11:21:21

jsView - 與＃parent.data不同，〜root在這種情況下不起作用

回答

相關問題