CODEWITHSUNDEEP
asp.net-mvc-4knockout.jsbreeze
John McArthur
John McArthur

Reputation: 1024

Databinding issue with MVC4, Breeze and knockout

I am new to knockout.js and I'm getting an error with a simple test page, using MVC4 and Breez.js. I want to bind data to a table.

@{Layout = null;}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Breeze Test</title>
        <link rel="stylesheet" href="/Content/breezesample.css" />
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">
                        <a href="~/">Breeze Test</a>
                    </p>
                </div>
            </div>
        </header>
        <div id="body">
            <section id="content" class="content-wrapper main-content">

                <script type="text/x-jquery-tmpl" id="BookTableTemplate">
                    <table>
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Author</th>
                                <th>ISBN</th>
                                <th>Price</th>
                                <th>Read?</th>
                            </tr>
                        </thead>
                        <tbody data-bind="template: {name:'bookRowTemplate', foreach:books}">
                        </tbody>
                    </table>
                </script>

                <script type="text/x-jquery-tmpl" id="bookRowTemplate">
                    <tr>
                        <td>${Title}</td>
                        <td>${Author}</td>
                        <td>${ISBN}</td>
                        <td>${Price}</td>
                        <td>${IsRead}</td>
                    </tr>
                </script>

                <div data-bind="visible: show" style="display: none">
                    <a href="#" data-bind="click: save">Save</a>&nbsp;
                        <input type="checkbox" data-bind="checked: IncludeRead" />
                    include read 

                    <div data-bind="template: 'BookTableTemplate'"></div>
                </div>
                <div id="logmessages"></div>
            </section>
        </div>
        <!--3rd party library scripts -->
        <script src="/Scripts/jquery-1.7.1.min.js"></script>
        <script src="/Scripts/knockout-2.1.0.js"></script>
        <script src="/Scripts/q.js"></script>
        <script src="/Scripts/breeze.debug.js"></script>

        <!-- Application scripts -->
        <script src="/Scripts/app/logger.js"></script>
        <script src="/Scripts/app/bookViewModel.js"></script>
    </body>
</html>

Instead of getting the data output I get: ${Title} ${Author} ${ISBN} ${Price} ${IsRead}

Upvotes: 0

Views: 786

Answers (1)

bizcad
bizcad

Reputation: 108

Look at this example: http://knockoutjs.com/documentation/template-binding.html

In your template use <td data-bind="text: Title">/>

Upvotes: 3

Related Questions