無法使用Dart-Polymer中的自動綁定dart模板中的選擇器進行查詢

看到類似的問題，我意識到可能的解決方案是使用MutationObservers，但我的用例似乎增加了更多的複雜性。無法使用Dart-Polymer中的自動綁定dart模板中的選擇器進行查詢

飛鏢代碼：

class MyModel extends Object with Observable { 
@observable num x = 0; 
List list = toObservable([]); 
} 

void main() { 

    initPolymer().run(() { 
     Polymer.onReady.then((_) { 
     var template = querySelector("#bindValueTemplate"); 
     var model = template.model = new MyModel(); 

     var tbl = querySelector("#viewtbl"); 

     new Timer.periodic(new Duration(seconds: 1), (_) { 
      tbl.children.clear(); 
      model.x += 1; 
      model.list.add(model.x); 
      return model.x; 
     }); 
    }); 
    }); 

}

HTML代碼：

<body> 
<template id="bindValueTemplate" is="auto-binding-dart"> 

<p>x = {{ x }}</p> 
<ul> 
    <template repeat ="{{item in list}}"> 
    <li>list item = {{item}}</li> 
    </template> 
</ul> 

<table class="table" id="viewtbl"> 
    <tr> 
    <td>67</td> 
    <td>b9</td> 
    </tr> 
</table> 

</template> 
</body>

依DART代碼所示，我想#viewtbl定期刪除表格的子元素（我沒有包括應該動態地向表中添加數據的代碼）。但是對於當前的代碼，我得到一個異常，因爲表變量（tbl）始終爲空。

如果我將表移動到「bindValueTemplate」之外，那麼querySelector可以工作，但是我將失去與該表的數據綁定。

是否有人可以幫助我：

一個解決方案，我保留2個數據有非常久遠querySelector訪問表元素結合到刪除的子元素表中。
爲什麼querySelector在表格在模板內時返回null，但在表格在模板外時工作。

來源

2014-08-30 SlowAndSteady

聚合物需要一些呼吸空氣。設置模型時，這並不意味着已經創建了元素。我不知道，但我認爲這是做異步。試試這樣說：

void main() { 

    initPolymer().run(() { 
    Polymer.onReady.then((_) { 
     var template = querySelector("#bindValueTemplate"); 
     var model = template.model = new MyModel(); 

     new Future(() { // <== make async to allow Polymer do its async tasks in between 
     var tbl = querySelector("#viewtbl"); 

     new Timer.periodic(new Duration(seconds: 1), (_) { 
      tbl.children.clear(); 
      model.x += 1; 
      model.list.add(model.x); 
      return model.x; 
     }); 
     }); 
    }); 
    }); 
}

來源

2014-08-30 08:04:49

不工作:(我不知道爲什麼，但是shadowdom爲null。我試過template.shadowRoot.olderShadowRoot.querySelector（'＃viewtbl'）;但是template.shadowRoot返回null – SlowAndSteady 2014-08-30 17:04:08

shadowDOM/shadowRoot的作用是什麼使用它？只有當你建立一個自定義元素（聚合物元素）時，Shadow DOM纔會存在 – 2014-08-30 17:34:03

看着另一個答案，我認爲我需要通過模板的影子DOM訪問viewtbl，但是影子DOM或不影子，它無法找到viewtbl元素。使用Futures沒有幫助，我也嘗試了5秒的模擬延遲後查詢，但querySelector仍然返回null。 – SlowAndSteady 2014-08-30 18:22:23

我想你只需要創建一個實際聚合物元件。然後，您可以使用$通過shadowdom中的id查詢元素（這是一張地圖）。我也想知道你用於聚合物元素的符號。
原因是querySelector（）查詢常規DOM而不是內部的Shadow DOM。

問候，羅伯特

來源

2014-08-30 06:07:07 Robert

謝謝！但我不能讓它與陰影同樣起作用。我試過template.shadowRoot.olderShadowRoot.querySelector（'＃viewtbl'）;但template.shadowRoot返回null – SlowAndSteady 2014-08-30 17:04:56

無法使用Dart-Polymer中的自動綁定dart模板中的選擇器進行查詢

回答

相關問題