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

我使用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。

最佳答案

这是您的示例页面的更新：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(...)"字符串），需要在Spectrum标签上设置新值，这发生在此行上：

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

因此，现在您应该在绑定到color的输入和输入绑定到{{spectrum}}标记的输入之间进行双向绑定。

关于javascript - 如何在JsViews自定义标记中链接基本类型变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39209947/