Question

所以我对Knockout有点新意，我有这个问题需要帮助。我认为这很简单，但我似乎无法弄明白。问题是我有这个计算基本上返回src for和我有这个Overlay，如果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;
});

Answer 1

这种方法。首先在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]);
        }
    };

我的bindingHandlers更改了我的img（管理错误）的网址：

    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 }" />

我的observbale＆＃34; pictureUrl＆＃34;是我的最终网址。当我永远不会改变这个img时，我的obseravble pictureDefault是我的默认图片。问我是否需要帮助。

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

1 个答案: