2015-11-04 69 views
0

我試圖讓下面的工作。它最初當然會呈現parentItems的內容,但是在更改它時,不會調用循環遍歷parentItems的模板。我已經看了看notifyPath,但我不知道這是否是正確的方向聚合物1.0深度路徑數組綁定

<!doctype html> 
<html> 
    <head> 
     <script src='bower_components/webcomponentsjs/webcomponents-lite.min.js'></script> 
     <link rel='import' href='bower_components/paper-button/paper-button.html'> 
    </head> 
    <body> 
     <dom-module id='my-element'> 
      <template> 
       <template is='dom-repeat' items='{{parentValues}}'> 
        <template is='dom-repeat' items='{{item.childValues}}'> 
         <div>{{item.value}}</div> 
        </template> 
       </template> 
       <paper-button on-tap='click'>click me</paper-button> 
      </template> 
     </dom-module> 
     <script> 
      Polymer({ 
       is: 'my-element', 
       properties: { 
        parentValues: { 
         type: Array, 
         value: function() { return [ { childValues: [ { value: 'original value' } ] } ]} 
        } 
       }, 

       click: function() { 
        this.parentValues[0].childValues[0].value = 'new value'; 
       } 
      }); 
     </script> 
     <my-element></my-element> 
    </body> 
</html> 

我怎樣才能得到它的工作?

萬分感謝:-)

回答

0

改變

<!doctype html> 
 
<html> 
 
    <head> 
 
     <script src='bower_components/webcomponentsjs/webcomponents-lite.min.js'></script> 
 
     <link rel='import' href='bower_components/paper-button/paper-button.html'> 
 
    </head> 
 
    <body> 
 
     <dom-module id='my-element'> 
 
      <template is='dom-repeat' items='{{parentValues}}' as ="parent"> 
 
        <template is='dom-repeat' items='{{parent.childValues}}' as="child"> 
 
         <div>{{child.value}}</div> 
 
        </template> 
 
       </template> 
 
       <paper-button on-tap='click'>click me</paper-button> 
 
      </template> 
 
     </dom-module> 
 
     <script> 
 
      Polymer({ 
 
       is: 'my-element', 
 
       properties: { 
 
        parentValues: { 
 
         type: Array, 
 
         value: function() { return [ { childValues: [ { value: 'original value' } ] } ]} 
 
        } 
 
       }, 
 

 
       click: function() { 
 
       // notify path to the properties using the polymer syntax 
 
        this.set('parentValues.0.childValues.0.value','changed value'); 
 
       } 
 
      }); 
 
     </script> 
 
     <my-element></my-element> 
 
    </body> 
 
</html>

+0

嗯,我知道了......非常感謝......和惋惜延遲我的回答 –

1

時,您需要使用dom-repeatas範圍在你的綁定,並notifyPath冒泡改變你的數組我相信@jeanPokou解決的問題是您需要使用'this.set(Object,New Value)'來設置嵌套對象的值。

您可以從「問問聚合物」系列更多地瞭解它爲什麼不更新嵌套值檢查這個視頻:https://youtu.be/0GxteaIaj2Q

+0

是的,知道了......現在我錯誤地簡化了我的例子,以至於問題消失了:-)。數組的parentValues數組並不只有一個值,它有很多。因此,@jeanPokou使用this.set成爲一個相當大的練習。問題是我可以「設置」什麼最低限度讓它觸發「財產效應」 –