Knockout JS - 您不能将绑定多次应用于同一元素 - MVC
Knockout JS - you cannot apply bindings multiple times to the same element - MVC
我是 Knockout js 的新手,不明白为什么会出现此错误。
我在 .net mvc 中有一个视图,当单击按钮时使用 jquery 使用 ajax 查询数据库,然后使用 returns 数据,然后我将其传递给 knockout要呈现,当您单击按钮时,它会打开一个模态 window 并显示数据正常,但它只会在显示多元素错误后每隔一秒执行一次。
有什么想法吗?
var ViewModel = function (docs) {
this.docs = ko.observable(docs);
};
$('.js--click').click(function () {
var id = $(this).data('id');
$.post("GetData", { id: id })
.done(function (data) {
ko.applyBindings(new ViewModel(data.docs));
});
});
<div data-bind="if: docs()">
<span data-bind="text: docs></span>
</div>
就像错误信息说的那样:你只能在同一个元素上调用一次ko.applyBindings
。您只想更新视图模型上的可观察对象;这不是这样做的方法。
使用 Knockout 做事的标准方法是在视图模型上有一个函数来获取数据,然后用这个新数据更新一个可观察对象,然后 UI 将自动同步。您将使用标准的 KO click
处理程序将点击事件附加到按钮,而不是使用 jQuery.
以您的示例为例,您必须按照以下方式做一些事情:
function ViewModel () {
var vm = this;
vm.docs = ko.observable();
vm.getData = function (id) {
$.post("GetData", { id: id })
.done(function (data) {
vm.docs(data.docs);
});
}
};
ko.applyBindings(new ViewModel()); // We only do this once!
<button data-bind="click: getData.bind($data, 'myID')"></button>
<div data-bind="if: docs">
<span data-bind="text: docs"></span>
</div>
我是 Knockout js 的新手,不明白为什么会出现此错误。
我在 .net mvc 中有一个视图,当单击按钮时使用 jquery 使用 ajax 查询数据库,然后使用 returns 数据,然后我将其传递给 knockout要呈现,当您单击按钮时,它会打开一个模态 window 并显示数据正常,但它只会在显示多元素错误后每隔一秒执行一次。
有什么想法吗?
var ViewModel = function (docs) {
this.docs = ko.observable(docs);
};
$('.js--click').click(function () {
var id = $(this).data('id');
$.post("GetData", { id: id })
.done(function (data) {
ko.applyBindings(new ViewModel(data.docs));
});
});
<div data-bind="if: docs()">
<span data-bind="text: docs></span>
</div>
就像错误信息说的那样:你只能在同一个元素上调用一次ko.applyBindings
。您只想更新视图模型上的可观察对象;这不是这样做的方法。
使用 Knockout 做事的标准方法是在视图模型上有一个函数来获取数据,然后用这个新数据更新一个可观察对象,然后 UI 将自动同步。您将使用标准的 KO click
处理程序将点击事件附加到按钮,而不是使用 jQuery.
以您的示例为例,您必须按照以下方式做一些事情:
function ViewModel () {
var vm = this;
vm.docs = ko.observable();
vm.getData = function (id) {
$.post("GetData", { id: id })
.done(function (data) {
vm.docs(data.docs);
});
}
};
ko.applyBindings(new ViewModel()); // We only do this once!
<button data-bind="click: getData.bind($data, 'myID')"></button>
<div data-bind="if: docs">
<span data-bind="text: docs"></span>
</div>