Question

我有一个与索引页面相关联的视图模型，具有类似这样的内容

// html
<div class="collapse navbar-collapse js-navbar-collapse" id="menuholder">
<ul foreachbinding>
  <li binding>
  </ul>
</div>

<div id="maincontent">
</div>
// javascript
        var VM = function () {
            var self = this;


            self.menuitems = ko.observableArray([]);
            self.loadmenu = function () {

                jQuery.ajax({
                    url: "/Home/GetMainMenu",
                    success: function (html) {
                        self.menuitems = html.menus


                    },
                    async: false
                });
            }
            self.loadmenu();
        };

ko.applyBindings(VM, document.getElementById("menuholder"));

如您所见，我只将绑定应用于menuholder元素。

现在我用这个动态加载maincontent元素的内容：

$("#maincontent").load("pages/home.html");

home.html页面有自己的视图模型，如此

//html
<body id="homepage">

</body>
//javascript
  var homeVM = function () {
            var self = this;
            self.topventes = ko.observableArray([]);
            self.promos = ko.observableArray([]);
            self.arrivage = ko.observableArray([]);
            self.nouveaute = ko.observableArray([]);
            self.loadcontent = function () {

                jQuery.ajax({
                    url: "/Home/GetHomePageContent",
                    success: function (html) {

                        self.topventes = html.topventes;
                        self.arrivage = html.arrivage;
                        self.nouveaute = html.nouveaute;
                        self.promos = html.promo;
                    },
                    async: false
                });
            }
            self.loadcontent();
        };

        ko.applyBindings(homeVM, document.getElementById("homepage"));

但在运行时我得到“无法多次将绑定应用于同一元素”错误。

有关正在发生的事情的任何想法吗？

Answer 1

根本原因是您的home.html有正文标记。这将导致KO误解文档的整个结构。无论如何，无论如何，你都不能在该视图中放置body标签。

只需将body标记更改为div标记即可修复。

knockoutjs 3.4无法再次对同一元素应用绑定

1 个答案: