0

我想将该<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 不是函数

我尝试将 JSON 数据作为属性添加并直接添加到data字段中，但都没有产生积极的影响。我该如何解决？

4

1 回答 1

0

myVerySpecialLib-import.html似乎包含一个全局变量声明，但这并不能真正帮助您，因为期望<nuxeo-tree>容器controller元素（而不是全局变量）。

此外，您的数据绑定<nuxeo-tree>.controller格式不正确（最后缺少 a ]）：

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

如果controller您要绑定它，可能应该将其声明为属性。它当前在properties对象之外声明。

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

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

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

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

演示

于 2017-11-19T05:47:06.720 回答