如何在 JsViews 自定义标签中 link 基本类型变量

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 自定义标签中 link 基本类型变量

how to link base type variable in JsViews custom tag

javascript

jsrender

jsviews

spectrumjs