Question

在以下代码中发现未捕获错误.. 绑定只应用一次，直到显示不能多次应用绑定... 是淘汰版的问题吗？可以在immediatly调用函数中编写以下代码...

        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代码是：

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

//布局

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

Answer 1

更改你的html，如下所示：

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

并将javascript中的最后一行更改为：

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

这告诉knockout只将绑定应用于第二个参数中指定的DOM元素。

我怀疑可能还有其他视图模型也试图应用绑定。如果是这种情况，请适当更新其他视图模型。

knockoutjs不能多次将绑定应用于同一元素

1 个答案: