knockoutjs有条件地设置图像src取决于值

时间:2015-12-17 13:25:16

标签: javascript knockout.js knockout-2.0

我想以某种方式根据我从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'" />

由于

1 个答案:

答案 0 :(得分:1)

为此使用计算的observable。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />

<div id="menu" class="menu">
    <h3>Ajouter des éléments</h3>
    <ul>
        <li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
    </ul>
</div>
<div id="bg"></div>

此外,使用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