来自 Spectrum js 的用于聚合物数据绑定的输入

Question

我希望动态插入光谱输入字段，以便在我的模板中拥有更加自定义的颜色选择器。我遇到的问题是我想要绑定数据的对象在频谱函数内部是空的。我想知道将光谱整合到聚合物模板中的最佳方法是什么。

正如您将看到的，当 editMode 启动时，频谱被实例化并且 div 被插入到 HTML 中。在 change() 上，我想选择任何颜色并将其绑定到 document 对象。我的 console.log 返回 document 确实为空。在 editMode 函数内部，在进入光谱之前，document 正如预期的那样是一个聚合物对象。我尝试将 document 设为全局变量，但这并没有什么不同，因为它不再是绑定对象，因此我无法访问它的任何属性、保存它等等。

频谱需要是自定义元素吗？有什么见解吗？

    <script>
  Polymer({
    is: 'image-view',
    behaviors: [Test.LayoutBehavior],
    properties: {

      /**
         * @doctype Image
         */
      document: {
        type: Object,
        observer: '_documentChanged'
      },
      edit: {
        type: Boolean,
        value: false
      }
    },

    _canEdit: function(doc) {
      return doc && doc.type !== 'Root' && this.hasPermission(doc, 'Write');
    },
    _editMode: function() {
      this.edit = true;

      $(".spectrum-div").html(
        "<label>Brand Text Color</label><input type='text' id='full'/>"
      );

      $("#full").spectrum({
        color: "#ECC",
        showInput: true,
        className: "full-spectrum",
        showInitial: true,
        showPalette: true,
        showSelectionPalette: true,
        maxSelectionSize: 10,
        preferredFormat: "hex",

        move: function (color) {

        },
        show: function () {

        },
        beforeShow: function () {

        },
        hide: function () {

        },
        change: function(color) {

          if (this.document != null) {
            console.log('THIS DOCUMENT IS NOT NULL');
            console.log(this.document.properties["image:brand_text_color"]);
          } else console.log('Sorry, document is null.');

          var col = color.toHexString();
          //$("#brand-text-color").val(col);
          //document.getElementById("brand-text-color").value = col;
          this.document.properties["image:brand_text_color"] = col;

        },

        palette: [
            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
            "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
            "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 
            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 
            "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 
            "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", 
            "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", 
            "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", 
            "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
            "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
            "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
            "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", 
            "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
        ]
      });
    },



    _documentChanged: function() {
      if (this.document) {
        this.edit = false;
      }
    },
    _isAdmin: function(user) {
      return user.isAdministrator;
    }
  });

  </script>

Answer 1

首先您可以将输入字段放入元素的本地 DOM 中，并在不处于 edit 模式时将其隐藏：

<label hidden$="[[!edit]]" for="full">Brand Text Color</label>
<iron-input bind-value="{{document.prop}}">
    <input hidden$="[[!edit]]" type="text" id="full"/>
</iron-input>

（请注意，我还添加了一个铁输入，因为您需要在下面进行值绑定。）

这样你就可以通过 id 从 JavaScript 访问它，通过this.$.full。

最后，您可以从 Polymer 的 attached 回调中初始化光谱：

Polymer({
    properties: {
        document: {
            type: Object,
            // initialize with an object holding all required keys, 
            // for proper change notification
            value: function() {
                return {
                    // document properties here
                    prop: null
                };
            },
            observer: '_syncDocument'
        },
        ...
    },
    ...
    attached() {
        $(this.$.full).spectrum({
            ...
        });
    },
    _syncDocument(newValue) {
        // window.document[???] = newValue.prop;
    }
    ...
});

现在我不确定您要通过文档实现什么目标。是window.document吗？在这种情况下，您需要在 element.document 上的观察者中手动将 element.document.value 同步到 window.document.[propertyName]。

PS：不要忘记包含 Iron-input，或者使用其他东西解决我的快速实现。