knockoutjs 根据值有条件地设置图像 src

Posted 2023-05-07

【中文标题】knockoutjs 根据值有条件地设置图像 src

【英文标题】：knockoutjs conditionally set image src depending from a value

【发布时间】：2016-03-23 23:43:15

【问题描述】：

我想以某种方式根据我从 js 获得的名称值动态设置图像源。

我尝试了类似的方法来设置特定 div 的 css 类以使其与图像一起使用，但它不起作用。我想要实现的是 src 根据名称值动态更改

<img data-bind="attr:src: 'image1.jpg' : Name == 'Package 1', src: 'image2.jpg' : Name == 'Package 2'" />

作为参考，这是适用于 css 样式的内容：

<div data-bind="css:  package1_css: Name == 'Package 1', package2_css: Name == 'Package 2'" />

【问题讨论】：

attr 是属性，你不能像 className 里面的 css 那样使用它，带有条件检查。在这里查看演示jsfiddle.net/LkqTU/28142（切换黑白图像）

【参考方案1】：

为此使用计算的 observable。

self.ImageSource = ko.computed(function()
    var url1 = "https://placeholdit.imgix.net/~text?txtsize=12&txt=101&50&w=50&h=50";
    var url2 = "https://placeholdit.imgix.net/~text?txtsize=12&txt=102&50&w=50&h=50";

    switch(self.Name())
        case "Package 1":
            return url1;
        case "Package 2":
            return url2;
            break;
    

, self);

另外，使用attr 绑定到图像标签：

<img data-bind="attr: src: ImageSource()" />

【讨论】：

我在列表中获取项目 并且名称是该列表的一部分@Jezzabeanz 如果您将图像源添加到该视图模型并使用 $parent.ImageSource 在视图中引用它。那应该可以。 @Laziale 你可以通过函数检查在这里传递参数jsfiddle.net/LkqTU/28144。欢呼