Как подключить компонент 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;
  }
};

Это ошибка консоли:

Ошибка типа: this.controller.isLeaf не является функцией

Я попытался добавить данные 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.controller в ready() обратный вызов родительского элемента <nuxeo-tree> (где this это контейнер). Вы также можете установить <nuxeo-tree>.data через привязку, чтобы упростить ваш HTML-шаблон, и это свойство может быть инициализировано в ready() также.

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

демонстрация