Javascript 创建延迟等待用户输入的dojo

我正在考虑创建一个可以从我的一个小部件调用的颜色选择器。用户将单击一个按钮打开颜色选择器并单击一种颜色，然后它将返回到调用小部件

我想我需要创建一个延迟对象，它将以某种方式等待延迟解决。然后，我可以在调用小部件中将该颜色设置为一个变量。但是我很难把我的思想集中在它上面

我的调用小部件有如下方法：

pickColor: function (e) {
    Event.stop(e);
    var colorPicker = new ColorWidget();
    colorPicker.getColor().then(function (value) {
        console.log(value);
    });
}

我的ColorWidget就是创建延迟对象的那个，对吗

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/ColorWidget.html",
    "dojo/Deferred",
    "dojo/_base/Color",
    "dojo/dom-construct",
    "dojo/domReady!"],

function (declare, _WidgetBase, _TemplatedMixin, template, Deferred, Color, domConstruct) {

    return declare("ColorWidget", [_WidgetBase, _TemplatedMixin], {
        templateString: template,
        deferred: {},
        color: {},

        constructor: function () {
            this.deferred = new Deferred();
        },
        postCreate: function () {
            domConstruct.place(this.domNode, "color-picker-holder", "last");
        },
        pick: function (evt) {
            this.color = new Color(evt.srcElement.id);
            domConstruct.destroy(this.domNode);
            this.deferred.resolve(this.color);
        },
        getColor: function () {
            return this.deferred;
        }
    });
});

这只是我脑海中的一个想法，但它是这样设计的吗？我可能会在登录对话框中使用同样的想法，在成功验证之前停止初始化页面。是这样吗

---

编辑：我已经走上了正轨。这是有效的。

尽管你说你已经回答了自己的问题，但我会用更好的解决方案来回答，因为我认为其他用户也可能尝试使用延迟的解决方案（这是完全错误的）

你想做的是

1） 创建颜色选择器，使其成为表单元素。您只需要扩展一个有效的dojo表单元素。（我选择为我的颜色选择器扩展ValidationTextBox）

2） 创建一个接受回调函数的自定义小部件。您可以重写onChange，也可以使用自定义的回调方法。每当值发生变化时（您可以使用observer方法.watch（）），您都会调用回调

3） 您只需正常连接到onChange事件

---

我创建了一个自定义Dojo小部件。。看起来是这样的：

pickColor: function (e) {
    Event.stop(e);
    var colorPicker = new ColorWidget();
    colorPicker.getColor().then(function (value) {
        console.log(value);
    });
}

颜色选择器

单击颜色选择器或文本框获取“焦点”时，将打开包含颜色选择器的下拉列表。颜色选择器一旦更改，就会更新父窗口小部件（即文本区域）

您可以在下面看到相关的类。它被分成几个文件

ColorTextBox.js

（扩展ValidationTextBox）

\u ColorPickerDropDown.js

（只是一个创建颜色选择器的简单小部件）

代码

ColorTextBox.js

模板字符串

模板字符串

<div >
<div data-dojo-attach-point="_colorPickerNode"></div>
<div class='toolbar'>
    <a data-dojo-attach-event="onclick:onCancel" class='pull-right'>Cancel</a>
    <a data-dojo-attach-event="onclick:onExecute" class='btn btn-sm btn-default pull-right'>Select</a>
</div>
</div>

取消
挑选

我无法想象为什么要将“延迟”用于颜色选择器之类的东西。但这是一个有趣的问题。我猜你可能对这两个教程很熟悉：，是的，我已经看过了。我很难想出一个更好的方法来调用一个小部件，并在用户选择一个后从它（到我的调用小部件）中获取一个值。如果我立即调用getColor（）并且它不是延迟的，那么它将立即返回null。如果我走远了，一定要让我知道。谢谢你的回复。为什么不让colorpicker小部件发布一个“datePicked”事件呢？调用小部件可以订阅这个事件（使用dojo/on，on（colorpickerWidget，“datePicket”，function（）{}），并使用它的值（可以作为事件的参数传递）。这是一个更好的主意。我是Dojo新手，所以我不熟悉它是如何发布/订阅的。在我走这条路线之前，我用谷歌搜索了“Dojo observable”。。。没走多远。我会查的，谢谢。看起来他们的发布/订阅系统已经被弃用，取而代之的是一个集中的“主题”中心。还是值得一看。我已经把答案改成了你的。虽然一个可观察的对象确实是可接受的设计模式，但延迟对象并不是完全错误的。它仍然是一个等待解析的对象，即使它没有等待异步调用。不管怎样，我喜欢你的小部件。谢谢@莱克，你能帮忙吗

define([
    "dojo/_base/declare",
    "dojox/widget/ColorPicker",
    "dojo/text!./_ColorPickerDropDown.html",
    "my/diskit/_base/_DiskitMixin",
    "dojo/_base/lang"
    ], function( declare, ColorPicker, template, _DiskitMixin, lang ){
    return declare([ _DiskitMixin ], {
        templateString : template,
        baseClass: "diskitColorPickerDropDown",
        postCreate : function(){


            this.picker = new ColorPicker({
                animatePoint:false,
                showHsv: false,
                showRgb: false,
                webSafe:false,
                onChange :  lang.hitch( this, this.onChange )
            }, this._colorPickerNode);
            if(this.value.length === 7){
                this.picker.setColor( this.value.trim() );
            }
            this.inherited( arguments );
        },
        onCancel : function(){

        },
        onExecute : function(){

        }
    });

});

<div >
<div data-dojo-attach-point="_colorPickerNode"></div>
<div class='toolbar'>
    <a data-dojo-attach-event="onclick:onCancel" class='pull-right'>Cancel</a>
    <a data-dojo-attach-event="onclick:onExecute" class='btn btn-sm btn-default pull-right'>Select</a>
</div>
</div>