如何将 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: {...}
}

我建议在 <nuxeo-tree> 的父元素（其中 this 是容器）的 ready() 回调中设置 this.controller。您还可以通过绑定设置 <nuxeo-tree>.data 以简化您的 HTML 模板，并且属性也可以在 ready() 中初始化。

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

demo

如何将 nuxeo-tree 组件附加到 Polymer v1 应用程序

How to attach nuxeo-tree component to Polymer v1 app

javascript

nuxeo

polymer

polymer-1.x