javascript - knockoutjs 不能对同一个元素多次应用绑定(bind)-6ren

javascript - knockoutjs 不能对同一个元素多次应用绑定(bind)

转载作者：塔克拉玛干更新时间：2023-11-02 22:15:57

在以下代码中发现 Uncaught Error ..绑定(bind)仅应用一次，直到显示无法多次应用绑定(bind)...是 knockout 版的问题吗？可以在立即调用函数中编写以下代码...

        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>

最佳答案

将您的 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 仅将绑定(bind)应用于第二个参数中指定的 DOM 元素。

我怀疑可能还有其他 View 模型也在尝试应用绑定(bind)。如果是这种情况，请适当更新其他 View 模型。

关于javascript - knockoutjs 不能对同一个元素多次应用绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19265203/

文章推荐： android - LocationClient 无法解析为类型

文章推荐： android - 如何清除 UI 线程队列

javascript - (不能)在javascript中获取元素样式的一部分
我是 javascript 的新手(今天开始弄乱它)。我正在尝试更改名为“bar”的元素(div)的高度。条形图将成为图表的一部分。我可以毫无问题地将按钮连接到更改栏高度的函数。一切正常，除了条形
ios - 不能 "addSubView"
错误 -> “UIVIew”没有名为“addSubView”的成员 override func viewDidLoad() { super.viewDidLoad() // Do an
swift - 不能 CGEventTapCreate
我在命令行工具项目中复制并粘贴了 main.swift 下面链接中的代码。 How do you use CGEventTapCreate in Swift? 它构建没有错误，但是当我运行时， gua
c++ - 不能 dynamic_cast
我在尝试编译我的代码时遇到以下错误。 ERROR! ..\myCode\CPOI.cpp:68:41: error: cannot dynamic_cast 'screenType' (of type
不能 strcat_s 多个字符到字符串指针
我正在尝试将多个字符串连接到一个我已为其分配内存的字符串指针。这是一个例子: char *finalNumString = malloc(sizeof(char)*1024); finalNumStr
不能 dup2 将管道的末端写入标准输出
我在使用 dup2() 和 pipe() 时遇到问题。当我尝试将管道的写入端 dup2 到 STDOUT_FILENO 时，我收到了 EBADF。我用 gdb 在 dup2(pout[1], ST
Git:不能 pull
首先，我应该说我运行的是 Windows 7。因此，今天早上我尝试像往常一样从我的存储库中提取数据，但我做不到。我得到了错误: The authenticity of host 'github.co
python - 不能 "activate"virtualenv
刚开始在虚拟环境中运行Python，乱用Django，无法激活虚拟环境。花了最后 4 个小时尝试在本地终端/VS 代码上激活虚拟环境 (venv)，但没有成功。避免使用“sudo pip inst
r - 数据框可以做什么而 tibble 不能？
Tidyverse 的粉丝经常给出使用小标题而不是数据框的几个优点。它们中的大多数似乎旨在保护用户免于犯错误。例如，与数据框不同，小标题: 不需要 ,drop=FALSE不从数据中删除维度的论据。不
javascript - 不能 Dockerize Elm
我一直在对 Elm 应用程序进行 docker 化时遇到问题。据我所知，我已经创建了一个完整且有效的 Docker 文件……但它不起作用。我会解释的。所以我的脚本在 3 个文件中运行。首先是启动
java - 不能 Mockbean HttpServletResponse
我可以在 Controller 中使用@Autowired，例如 @RestController public class Index { @Autowired HttpServlet
function - 不能 `compose` 和方法和函数
我定义了一个方法和一个函数: def print(str:String) = println val intToString = (n:Int) => n.toString 现在我想创作它们。我的问
javascript - 不能 .map() 一个看似数组的值
当我控制台单独记录变量“pokemons”时，它确实返回一个数组。但是当我尝试映射它时，出现错误: TypeError: pokemons.map is not a function 我的代码: im
python - 不能 `import smtplib`
每当我尝试在 Python 解释器中导入 smtplib 时，都会收到此错误: ImportError: cannot import name fix_eols 我该如何解决这个问题？编辑:这是完整
javascript - 为什么 {{#each}} 可以正常工作而 {{#with}} 不能？
我正在使用 Meteor.js 开发一个项目，但在使用 Handlebar 时遇到了一些问题:我想检索集合的最后一项，并显示字段:其中包含 html 的文本: 这是我的javascript代码: Te
java - onTouchEvent 不能@Override
你好，我想使用 Service 实现 GestureDetector 但是我有这个错误The method onTouchEvent(MotionEvent) of type GestureServi
java - 不能@Autowired接口(interface)
我正在尝试在 Controller bean 中 Autowiring 接口(interface) 在我放置的上下文配置文件中和我的 Controller 类是 @Controller pub
c++ - 不能 #include
我试图在 mainwindow.cpp 中包含 QtSvg，但是当我编译时它说无法打开包含文件:QtSvg。我已经在我的 *.pro 文件中添加了这个(QT += svg)。我可以知道可能是什么问题吗
postgresql - 不能 100% 确定这是否安全
鉴于以下 PostgreSQL 代码，我认为这段代码不容易受到 SQL 注入(inject)攻击: _filter 'day' _start 1 _end 10 _sort 'article_name
MYSQL:不能/如何将子查询用作完全合格的 CTE
我想执行以下操作。这在 MySQL 中是非法的。 PostGRESQL 中关联的 CTE(“with”子句)有效。这里的假设是 MySQL 中的子查询不是完全限定的 CTE。请注意:这个查询显然非常

塔克拉玛干

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - knockoutjs 不能对同一个元素多次应用绑定(bind)