CODEWITHSUNDEEP
javascripthtmlcssknockout.js
Scott M
Scott M

Reputation: 585

Setting style attributes using data-binding and knockout

I am trying to use knockout as a way to dynamically handle changes in a webpage. Here is the model I have written (emphasis on the radioEntry object).

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

}

I'd like to be able to use self.outline in the radioEntry object as a way of updating the outline color of an image.

In the HTML right now I have...

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

In the table in the list div there is an entry for the image I am trying to outlne. I do not know how to update the color of this outline or interact with this outline using knockout.

How do I do that?

Upvotes: 1

Views: 602

Answers (1)

James Thorpe
James Thorpe

Reputation: 32192

You can use the style binding:

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

Upvotes: 2

Related Questions