Question

我正在尝试使用knockout来动态处理网页中的更改。这是我写的模型（强调radioEntry对象）。

function radioListModel()
{
    var self = this;

    self.nextArtist = ko.observable("");
    self.nextAlbum = ko.observable("");
    self.radiolist = ko.observableArray([]);

    self.getRadioEntry = function()
    {
        if(self.nextArtist() != "" && self.nextAlbum() != "")
            self.radiolist.push(new self.radioEntry(self.nextArtist(), self.nextAlbum()));

        $('#nextArtistInput').val('');
        $('#nextAlbumInput').val('');
    };

    self.radioEntry = function(newArtist, newAlbum)
    {
        var self = this;
        console.log(newAlbum);
        self.artist = newArtist;
        self.album = newAlbum;
        self.art = retrieveArt(newArtist, newAlbum);
        self.slider = ko.observable(0);
        self.outline = ko.computed(function(){
            var percentage = self.slider()/100;
            console.log("percentage: "+percentage);
            var color = Math.round(percentage*color_code);
            console.log("color: "+"#"+color.toString(16));
            return "#"+color.toString(16);
        });

        self.test = function(){return self.slider().toString();}
    };

    self.removeEntry = function(radio_entry)
    {
        self.radiolist.remove(radio_entry);
    };

    self.albumSelect = function(radio_entry)
    {
        alert(radio_entry.artist +"\n"+radio_entry.album);
    };

}

我希望能够在radioEntry对象中使用self.outline作为更新图像轮廓颜色的方法。

现在在HTML中我有......

<head>
<title>Multi Radio for Spotify</title>

<style>
img {
    outline-style: solid;
    outline-width: 10px;
}
</style>

</head>



<body>

    <div id="UI">
        <button data-bind="click: getRadioEntry"><h2>ADD TO RADIO</h2></button>
        <p>Artist: <input id="nextArtistInput" data-bind="value: nextArtist"/></p>
        <p>Album: <input id="nextAlbumInput" data-bind="value: nextAlbum"/></p>

    </div>

    <div id="list">
        <table>
            <tr data-bind="foreach: radiolist">
                <td data-bind="click: $root.albumSelect">
                    <img data-bind="attr: {src: art}" **UPDATE THE OUTLINE COLOR HERE** height="200" width="200"/>
                </td>
            </tr>

            <tr data-bind="foreach: radiolist">
                <td>
                    <input type="range" min="0" max="100" data-bind="value: slider" step="5" style="width: 200px"/>
                </td>
            </tr>

            <tr data-bind="foreach: radiolist">
                <td>
                    <button data-bind="click: $root.removeEntry">Remove</button>
                </td>
            </tr>
        </table>
    </div>
</body>

<script type='text/javascript' src='bower_components/knockout/dist/knockout.js'></script>
<script type='text/javascript' src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="helper.js"></script>
<script type='text/javascript'src="app.js"></script>

在列表div的表格中，有一个我想要的图像条目。我不知道如何更新此轮廓的颜色或使用knockout与此轮廓交互。

我该怎么做？

Answer 1

您可以使用style binding：

<img data-bind="attr: {src: art}, style: {outlineColor: outline}" height="200" width="200"/>

使用数据绑定和淘汰设置样式属性

1 个答案: