knockoutjs can not apply bindings multiple times to the same element

Question

in following code uncaught error is found.. the binding is applied only once till it display can not apply bindings multiple times... is it problem of knockout version ? can be write following code in a immediatly invoke function...

        var DummyContact = [
        {
            "ContactID": 1,
            "FirstName": "Nimesh",
            "LastName": "Vaghasiya"
        },
        {
            "ContactID": 2,
            "FirstName": "John",
            "LastName": "Cena"
        }
    ];

    var ContactViewModel = function () {
        var self = this;
        var url = "/Contacts/GetAllContacts";
        //var refresh = function () {
        //    $.getJSON(url, {}, function (data) {
        //        self.Contacts(data);
        //    });
        //};
        var refresh = function () {
            self.Contacts(DummyContact);
        };

        // public data properties
        self.Contacts = ko.observableArray([]);
        refresh();

        self.createContact = function () {
            window.location.href = '/Contacts/CreateEdit/0';
        };

        self.editContact = function (Contact) {
            window.location.href = '/Contacts/CreateEdit/' + Contact.ContactID;
        };

        self.removeContact = function (Contact) {
            if (confirm("Are you sure you want to delete this profile?")) {
                self.Contacts.remove(Contact);
            }
        };
    };
    ko.applyBindings(new ContactViewModel());

html code is :

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    <html>
    <body>

        <input type="button" class="btn btn-small btn-primary" value="New Contact" data-bind="click:$root.createContact" />
        <hr />
        <table class="table table-striped table-bordered table-condensed">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th></th>
            </tr>
            <tbody data-bind="foreach: Contacts">
                <tr>
                    <td class="name"><a data-bind="text: FirstName, click:$parent.editContact"></a></td>
                    <td data-bind="text: LastName"></td>
                    <td>
                        <button class="btn btn-mini btn-danger" data-bind="click:$parent.removeContact">remove</button></td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    <script src="~/Scripts/Contact.js"></script>

//layout

        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/themes/base/jquery.ui.all.css")
        @Styles.Render("~/Content/themes/base/jquery.ui.dialog.css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/knockout")
    </head>
    <body>
        <header>
            <div class="container content-wrapper">
                <div class="float-left">
                    <p class="site-title">
                        <a href="@Url.Action("Index", "Home")">
                            <img src="~/Content/themes/base/images/address-book.png" style="margin-left: -5px" /></a>
                    </p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            @if (Request.IsAuthenticated)
                            {
                                <li>@Html.ActionLink("Groups", "Index", "Groups")</li>
                                <li>@Html.ActionLink("Contacts", "Index1", "Contacts")</li>
                                <li>@Html.ActionLink("Address", "Index", "Address")</li>
                                <li>@Html.ActionLink("Email", "Index", "Emails")</li>
                                <li>@Html.ActionLink("Numbers", "Index", "Numbers")</li>
                            }
                            <li>@Html.ActionLink("Contact Us", "Contact", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix container">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper container">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @Styles.Render("~/Content/bootstrap/bootstrap.css")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/Scripts/modaldialog.js")
        @RenderSection("scripts", required: false)
    </body>
    <script type="text/javascript">
        (function () {
            $("#body").show({ effect: "drop", direction: "down", distance: 200, duration: 1000 })
        })();
    </script>
    </html>

Have you seen this: http://stackoverflow.com/questions/18953280/knockoutjs-v2-3-0-cannot-apply-bindings-multiple-times-to-the-same-element?rq=1 — Mikael Östberg, Oct 09 '13 at 07:31
Do you have another model in the `_Layout.cshtml` file? Actually, what's in the layout file? You have `html` tags in the view, so there's something fishy here. — Mikael Östberg, Oct 09 '13 at 07:33
Where you have placed the scripts that apply ko bindings to dom in Index page. i want to know the position i.e inside head tag/ inside body tag/ after html tag etc. — super, Oct 09 '13 at 11:19
at the last of index page but i didn't write html or body tag in index page. — Nimesh Vaghasiya, Oct 09 '13 at 11:45

score 9 · Accepted Answer · answered Oct 10 '13 at 04:19

Change your html so something like this:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>
<body>
    <div id="unique-view-data">
    <input type="button" class="btn btn-small btn-primary" value="New Contact" data-bind="click:$root.createContact" />
    <hr />
    <table class="table table-striped table-bordered table-condensed">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th></th>
        </tr>
        <tbody data-bind="foreach: Contacts">
            <tr>
                <td class="name"><a data-bind="text: FirstName, click:$parent.editContact"></a></td>
                <td data-bind="text: LastName"></td>
                <td>
                    <button class="btn btn-mini btn-danger" data-bind="click:$parent.removeContact">remove</button></td>
            </tr>
        </tbody>
    </table>
    </div>
</body>
</html>

<script src="~/Scripts/Contact.js"></script>

And change the last line in your javascript to this:

ko.applyBindings(new ContactViewModel(), document.getElementById("unique-view-data"));

This tells knockout to only apply the bindings to the DOM element specified in the second parameter.

I suspect that there might be other viewmodels also trying to apply bindings. If that is the case, please update the other viewmodels appropriately.

what is the context of that conctacViewModel if i what to access it from another viewModel? — Geomorillo, Mar 22 '14 at 01:32
He is applying bindings to unique-view-data, if i create another viewmodel and asign bindings to another dom element how to access or reference for example self.Contacts observable from inside this new one ? — Geomorillo, Mar 24 '14 at 18:28
thanks anyway i already solved it using ko.dataFor() and ko.dataContext() — Geomorillo, Mar 27 '14 at 20:18

knockoutjs can not apply bindings multiple times to the same element

1 Answers1