Question

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

正如您将看到的，当启动editMode时，将实例化频谱并将div插入到HTML中。在change（）上，我想要选择任何颜色并将其绑定到文档对象。我的console.log返回文档确实为空。在editMode函数内部，在进入光谱之前， 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>

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

通过this.$.full

，您可以通过ID从JavaScript访问它

最后，您可以从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：不要忘记包含铁输入，或者用其他方法解决我的快速实施。

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

1 个答案: