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 파일 :

TypeError: this.controller.isLeaf is not a function

나는 같은 JSON 데이터를 추가하려고 :

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; 
    } 
}; 

이 콘솔 오류입니다 이것은 내가 해봤 코드입니다 또한 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