nuxeo-treeコンポーネントをPolymer v1アプリケーションに接続する方法

Question

<nuxeo-tree>コンポーネントをPolymer v1アプリケーションに追加したいが、コンソールにエラーが表示されている。

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/nuxeo-ui-elements/nuxeo-tree/nuxeo-tree.html"> 
<link rel="import" href="./myVerySpecialLib-import.html"> 

<dom-module id="my-app"> 
    <template> 

    tree:<br/> 

    <nuxeo-tree data="[ title: 'root', children: [ {  title: 'a',  children: [] }, {  title: 'b',  children: [  {title: 'x'},  {title: 'y'}  ] } ]]]" controller="[[controller]"> 
     <template> 
     <template is="dom-if" if="[[!opened]]"> 
      <iron-icon icon="hardware:keyboard-arrow-right" toggle></iron-icon> 
     </template> 
     <template is="dom-if" if="[[opened]]"> 
      <iron-icon icon="hardware:keyboard-arrow-down" toggle></iron-icon> 
     </template> 
     <span select>My title is: [[item.title]]</span> 
     <span>Am I a leaf? [[isLeaf]]</span> 
     </template> 
    </nuxeo-tree> 
    </template> 

    <script> 
    Polymer({ 
     is: 'my-app', 

     properties: { 
     data: { 
      type: String, 
      value: "[ title: 'root', children: [{ title: 'a',children: []},{title: 'b',children: [{title: 'x'},{title: 'y'}]}]]", 
     }, 

     opened: { 
      type: Boolean, 
      value: true, 
     }, 

     }, 

     controller: { 
      // How to get children of a node. Returns a promise. 
      getChildren: function(node) { 
      return Promise.resolve(node.children); 
      }, 

      // Logics you may want to have to control if a node is a leaf. 
      isLeaf: function(node) { 
      return node.children.length === 0; 
      } 
     }, 

    }); 

    </script> 
</dom-module> 

そしてmyVerySpecialLib-import.htmlファイル：

controller = { 
    // How to get children of a node. Returns a promise. 
    getChildren: function(node) { 
    return Promise.resolve(node.children); 
    }, 

    // Logics you may want to have to control if a node is a leaf. 
    isLeaf: function(node) { 
    return node.children.length === 0; 
    } 
}; 

これは、コンソールのエラーです：

TypeError: this.controller.isLeaf is not a function

私のようにJSONデータを追加しようとしましたがこれは私が試したコードですまた、dataフィールドに直接入力してください。どちらのフィールドも肯定的な効果はありませんでした。これをどうやって解決するのですか？

Answer 1

myVerySpecialLib-import.htmlは、グローバル変数の宣言が含まれているように見えるが、<nuxeo-tree>は（ないグローバル変数で）コンテナ要素にcontrollerを期待するので、それは本当にあなたを助けていません。

また、あなたのデータは<nuxeo-tree>.controllerのために結合は（それが最後に]を欠けている）不正な形式です：あなたはそれを結合している場合

<nuxeo-tree controller="[[controller]"> 

そしてcontrollerはおそらくプロパティとして宣言する必要があります。現在、propertiesオブジェクトの外に宣言されています。

// DON'T DO THIS 
/* 
properties: {...}, 
controller: {...} 
*/ 

// DO THIS 
properties: { 
    controller: {...} 
} 

私は（thisがコンテナである）<nuxeo-tree>の親要素のready()コールバックでthis.controllerを設定することをお勧めします。バインディングを介して<nuxeo-tree>.dataを設定してHTMLテンプレートを簡略化することもでき、そのプロパティはready()で初期化することもできます。

ready: function() { 
    this.data = /* insert data object here */; 
    this.controller = /* insert controller object here */; 
} 

demo