Question

出于某种原因，jQuery MiniColors颜色选择器（http://labs.abeautifulsite.net/jquery-minicolors/）似乎无法与Aurelia数据绑定一起正常工作。

calendar.html （模板）：

<!-- src/settings/school/calendars -->
<template>
  <require from="jquery-minicolors/jquery.minicolors.css"></require>
  <form>
    <div class="form-group">
      <label class="control-label" for="cal_name_orig"><span t="Calendar_name"></span></label>
      <input type="text" class="form-control" ref="cal_name_orig" value.bind="calendar.cal_name_orig & validate" />
    </div>
    <div class="form-group">
      <label class="control-label" for="cal_color"><span t="Color"></span></label>
      <input type="text" id="cal_color" class="form-control" value.bind="calendar.cal_color">
    </div>
  </form>
</template>

我的 calendar.js （查看模式）

//src/settings/school/calendars.js
import 'jquery-minicolors';

export class SettingsSchoolCalendars {

  error = null;
  selectedId = null;
  calendar = {};

  attached() {
    var self = this;
    // set focus when modal is shown
    $("#cal_color").minicolors({
      control: "wheel",
      theme: "bootstrap",
    });
  }
}

控件在表单中起作用，但绑定有两个问题：

calendar.cal_color的值出现在输入中，但未设置颜色选择器的颜色。
当我更改颜色选择器颜色时，新值将显示在输入中，但不会更新绑定值calendar.cal_color。

jQuery MiniColors是否搞乱了输入控件的value.bind属性？还有其他解释吗？

我可以通过将此模型添加到MiniColors实例中来成功获取模型：

  change: function(hex, opacity) {
    self.calendar.cal_color = hex;
  }

但是，我似乎无法做相反的事情（当模型改变时更新MiniColors控件）。它仍然无法正确加载初始颜色。

帮助！

Answer 1

我似乎没有这个控件的问题。我刚玩过它。

在我的HTML中，我有这个：

(function() {
  angular.module('myApp', ['myApp.dashboard','myApp.value']);
})();

(function() {
  angular.module('myApp.dashboard', []);
})();

(function() {
  angular.module('myApp.value', []);
})();

(function() {
  'use strict';
  angular.module('myApp.value').factory('whichToShow', function() {
    alert("running2");
    var logged = true;
    return {
      getVar: function() {
        return logged;
      },
      setVar: function(value) {
        logged = value;
      }

    };
  });
})();

(function() {
  'use strict';
  angular.module('myApp.dashboard').controller('mainControl', mainControl);

  mainControl.$inject = ['whichToShow'];
  alert("running1");

  function mainControl(whichToShow) {
    this.logged = whichToShow.getVar();
    alert("this.logged");
  }
})();

然后我设置了默认颜色：

<input type="text" ref="minicolors" value.bind="color" class="form-control" id="color">
<div>Color: ${color}</div>

最后，在我附加的回调中，我使用ref的元素：

color = '#ff6161';

它按预期为我工作。

编辑：我终于开始创建一个要点，以显示这一切：https://gist.run/?id=6e4a6ea77751ae9c69b178eb51105137

<强> app.html

attached() {
  $(this.minicolors).minicolors({
    change: (value, opacity) => {
      this.color = value;
    }
  });
}

<强> app.js

<template>
    Control value: ${controlValue}
  <form>
        <div class="form-group">
            <test></test>
            <label for="color">Color</label>
            <input type="text" value.bind="colorInfo.color" class="form-control" id="color">
      <div>Color: ${colorInfo.color}</div>
        </div>
        <div class="form-group">
            <test></test>
            <label for="color">Color</label>
            <input type="text" ref="minicolors" value.bind="colorInfo.color" class="form-control" id="color">
      <div>Color: ${colorInfo.color}</div>
        </div>
    </form>
</template>

使用带有Aurelia绑定的jQuery MiniColors

1 个答案: