knockoutjs 图像 src 未从 ko.observable 更新

Posted 2023-05-07

【中文标题】knockoutjs 图像 src 未从 ko.observable 更新

【英文标题】：knockoutjs image src not getting updated from ko.observable

【发布时间】：2016-06-08 21:08:56

【问题描述】：

我有这个代码：

  <tr data-bind="foreach: ProductEffectImagesToMatch()">
                            <td>
                                <span>
                                    <img data-bind="attr:  src: PoseId() ? ImageSrc() : '../images/style2/pose-select-placeholder.png' , click: $root.PasteSpring"
                                         />
                                </span>
                            </td>
                        </tr>

我在代码中设置 ImageSrc，但我不确定是否需要另外调用一些东西来应用绑定，因为虽然设置了值，但我可以在 console.log 中看到图像 url 不是正在更新。

这是视图模型：

function EffectSelectionRootModel(imagesrc, poseid) 
        var self = this;
        self.ImageSrc = ko.observable();;
        self.PoseId = ko.observable();

        if (imagesrc) 
            self.ImageSrc(imagesrc);
        

        if (poseid) 
            self.PoseId(poseid);
        
    

这就是设置值的方式：

var itemToEdit = ko.utils.arrayFirst(self.ProductEffectImagesToMatch(), function (item) 
                return item;
            );

            if (itemToEdit) 
                itemToEdit.ImageSrc = self.selectedPose().ImageUrl;
                itemToEdit.PoseId = self.selectedPose().Id;
            

以及执行该代码后的视图模型：

但是页面上的图片没有更新。

知道我还需要做什么吗？

【参考方案1】：

这样做

var itemToEdit = ko.utils.arrayFirst(self.ProductEffectImagesToMatch(), function (item) 
            return item;
        );

        if (itemToEdit) 
            itemToEdit.ImageSrc(self.selectedPose().ImageUrl);
            itemToEdit.PoseId(self.selectedPose().Id);
        

您必须以这种方式设置新值，否则您将覆盖 observable，它将不再起作用。