从计算的可观察量中获取价值

Getting value out of a computed observable

本文关键字：获取 观察 计算      更新时间：2023-09-26

所以我对淘汰赛有点陌生，我有这个问题需要帮助。我认为这很简单，但我似乎无法弄清楚。问题是我计算了这个基本上返回 src 的，并且我有这个叠加层，只有当 img srcs 的一部分包含某些字符串时，它才应该出现在图像顶部。所以基本上我正在尝试将覆盖层的可见（基本上是 3）绑定到一个计算的，它首先检查一个复选框以查看它是否被选中，然后这个想法是它还会询问用于 src 的计算值，一旦我得到该值，我可以返回它是否包含我要验证它的字符串， 我遇到的问题实际上是获取将 srs 作为字符串返回的计算值，以便我可以验证它。

提前感谢您提供的任何帮助，希望您有美好的一天！

self.model.SelectedImagePath = ko.computed(function () {
    if (self.model.SelectedImageIndex() > -1 && self.model.SelectedImageIndex() < self.model.ViolationImages().length) {
        return self.model.ViolationImages()[self.model.SelectedImageIndex()].ImagePath();
    }
    return "../../Content/img/spacer.gif";
});
//2DOverlay Display Lines
self.model.ShowOverlayLines = ko.computed(function () {
    //Validate if image is OV 1 or not to display Overlay Lines
    //Get the STRING VALUE of SelectedImagePath and Check if ()
    return self.model.SelectedImagePath() && BarsChecked && self.model.ShowOverlayLines;
});

执行此方法。首先，在 html 中的数据绑定中添加此事件：

<input class=" input-file" id="fileUpload" type="file" data-bind="event: { change: _updateImg}" />

接下来，在你的 js 文件中创建函数_updateImg，这个函数替换你的数据 img（将出现在你的标签 html img 中）：

function _updateImg(data, event) {
        var me = this, files, reader;
        files = event.currentTarget.files;
        if (files.length > 0) {
            reader = new FileReader();
            reader.onload = function (e) {
                me.pictureUrl(e.target.result);
            };
            reader.readAsDataURL(files[0]);
        }
    };
我的

绑定处理程序更改了我的 img 的 url（管理错误）：

    ko.bindingHandlers.img = {
    // Mise à jour de l'image
    update: function (element, valueAccessor) {
        // Données de l'observable
        var value = ko.utils.unwrapObservable(valueAccessor()),
            src = ko.utils.unwrapObservable(value.src),
            fallback = ko.utils.unwrapObservable(value.fallback),
            $element = $(element);
        // On set l'url de l'image, si fichier innaccesible alors on set le src à fallback (url par défaut)
        if (src) {
            $element.attr("src", src);
        } else {
            $element.attr("src", fallback);
        }
    },
    // Init de l'image
    init: function (element, valueAccessor) {
        var $element = $(element);
        $element.error(function () {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                fallback = ko.utils.unwrapObservable(value.fallback);
            $element.attr("src", fallback);
        });
    }
};

需要你的html在你的html标签中

： 
<img class="img-rounded img-responsive center-block" data-bind="img: { src: pictureUrl, fallback: _pictureDefault }" />

我的观察"pictureUrl"是我的最终网址。我的晦涩图片默认是我从不更改此 img 时的默认图片。问我是否需要帮助。

相关文章：