Question

I’m trying to use the attr binding to set an attribute (data-rating) but I’m getting the error message:

Error: Unable to parse bindings.
Message: SyntaxError: missing : after property id;
Bindings value: attr: { data-rating: UserMovies[0].Rating }

Does the attr binding not accept hyphenated attributes?

<ul class="content thumbnails" data-bind="foreach: movies, loader: $root.isLoading">
    <li class="movie">
        <div class="image">
            <img data-bind="image: { src: Poster.Detailed, alt: Title }" />
            <div class="actions">
                <!-- ko if: UserMovies.length > 0 -->
                <span class="raty" data-bind="attr: { data-rating: UserMovies[0].Rating }"></span>
                <!-- /ko -->
            </div>
        </div>
    </li>
</ul>

Answer 1

You should wrap attribute name with a quote, and if UserMovies is observableArray you should unwrap it using ():

<span class="raty" data-bind="attr: { 'data-rating': UserMovies()[0].Rating }"></span>