Question

我使用JsViews + spectrumjs colorpicker，我必须创建这样的自定义标记：

$.views.tags({
    spectrum : {
        template : "<input/>",
        onAfterLink : function (tagCtx, linkCtx) {
            var tag = this;
            var props = tagCtx.props;
            var options = {
                color : tagCtx.args[0]
            };
            var linkedElem;
            if (tag._.unlinked) {
                if (!tag.linkedElem) {
                    tag.linkedElem = tag._.inline ? tag.contents("*").first() : $(linkCtx.elem);
                }
                linkedElem = tag.linkedElem;
                $.each(props, function (key, prop) {
                    var option;
                    if (key.charAt(0) === "_") {
                        key = key.slice(1);
                        options[key] = prop;
                    }
                });
                this.linkedElem.spectrum(options);
            }
        },
        onUpdate : function () {
            return false;
        },
        onDispose : function () {
            this.linkedElem.spectrum("destroy");
        }
    }
});

它的工作原理见example，但我需要动态更新颜色。在spectrumjs中有事件move.spectrum并在他身上注册：

tag.spectrum = tag.linkedElem.spectrum(options);
tag.spectrum.on("move.spectrum", $.proxy(tag.moveEvent, tag));

并添加处理程序：

moveEvent : function (e, val) {
    // update model.color
    console.log(val.toRgbString());
    this.linkedElem.val(val.toRgbString());
},

onDispose : function () {
    this.spectrum.off("move.spectrum", $.proxy(this.moveEvent, this));
    this.spectrum.spectrum("destroy");
}

见example。所以我没有尝试过，我无法跟踪更改或将更改应用于model.color因为颜色是基本类型string

更新

我制作了一个example，但没有使用自定义标记来确定应该如何运作。

Answer 1

以下是您的示例页面的更新：https://jsfiddle.net/BorisMoore/g4vs23v1/5/

我更改了onAfterLink代码，如下所示：

onAfterLink : function (tagCtx, linkCtx) {
    var tag = this;
    var props = tagCtx.props;
    var options = {
        color: tagCtx.args[0]
    };
    var linkedElem;
    if (tag._.unlinked) {
        if (!tag.linkedElem) {
            tag.linkedElem = tag._.inline ? tag.contents("*").first() : $(linkCtx.elem);
        }
        linkedElem = tag.linkedElem;
        $.each(props, function (key, prop) {
            var option;
            if (key.charAt(0) === "_") {
                key = key.slice(1);
                options[key] = prop;
            }
        });
        tag.spectrum = linkedElem.spectrum(options);
        //tag.spectrum.on("move.spectrum", $.proxy(tag.moveEvent, tag));
        linkedElem.on("move.spectrum", $.proxy(tag.moveEvent, tag));
    } else {
        tag.linkedElem.spectrum("set", options.color);
    }
},

具体来说，我修正了关于move.spectrum的绑定，如下所示

linkedElem.on("move.spectrum", $.proxy(tag.moveEvent, tag));

当颜色显着更新时，例如通过更改文本框中的"rgb(...)"字符串，需要在频谱标记上设置新值，该值在此行中发生：

tag.linkedElem.spectrum("set", options.color);

所以现在你应该在输入绑定到color和输入绑定到{{spectrum}}标签之间进行双向绑定。

如何在JsViews自定义标记中链接基类型变量

1 个答案: