Fatal编程技术网
  • javascript/
  • Javascript 使用数据绑定和删除设置样式属性

Javascript 使用数据绑定和删除设置样式属性

javascript html css knockout.js

Javascript 使用数据绑定和删除设置样式属性,javascript,html,css,knockout.js,Javascript,Html,Css,Knockout.js,我正在尝试使用knockout作为一种动态处理网页更改的方法。这是我写的模型（重点是radioEntry对象） 我希望能够在radioEntry对象中使用self.outline来更新图像的轮廓颜色 在HTML现在我有 Spotify的多功能收音机 img{ 轮廓样式：实心； 轮廓宽度：10px； } 添加到收音机 艺术家： 相册： 去除 在列表div的表中，有一个我试图输出的图像的条目。我不知道如何更新此大纲的颜色或使用敲除与此大纲交互 如何操作？您可以使用： function

我正在尝试使用knockout作为一种动态处理网页更改的方法。这是我写的模型（重点是radioEntry对象）

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

在HTML现在我有


Spotify的多功能收音机
img{
轮廓样式：实心；
轮廓宽度：10px；
}
添加到收音机
艺术家：

相册：

去除

在列表div的表中，有一个我试图输出的图像的条目。我不知道如何更新此大纲的颜色或使用敲除与此大纲交互

如何操作？

您可以使用：



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);
    };

}

<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>

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