gpt4 book ai didi

javascript - 当后代属性所在的对象被替换时,Knockout 如何知道更新其后代属性的绑定(bind)?

转载 作者:行者123 更新时间:2023-12-03 10:05:01 25 4
gpt4 key购买 nike

我有一些事情要做,但我真的很困惑它是如何发生的。我是个菜鸟,真的需要你的帮助。

这是一个 jsbin,它演示了我的问题: http://jsbin.com/notakeniwu/5/edit?html,js,output

我对后代属性绑定(bind)如何维持其连接(即使父对象被替换)感到困惑。

所以,假设我创建了一个对象的新实例,然后在应用 KO 绑定(bind)之前将 DOM 上的某些内容绑定(bind)到这个新实例的属性(这个新对象正在从我的 View 模型中引用)。如果我稍后创建此对象的新实例并更新 View 模型中的引用(使用对象的可观察值),则后代属性将保持其与 DOM 的连接,即使我没有通过其可观察值替换它。这是一处全新的特性。这是怎么发生的? DOM 端如何知道替换它所绑定(bind)的属性?

这是代码:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div data-bind="with: person">
<h1 data-bind="text: name"></h1>
</div>
</body>
</html>

JS:

var Person = function (name) {
this.human = true;
this.name = ko.observable(name);
};

var ViewModel = function() {
this.person = ko.observable(new Person("Wayne"));
this.createPerson = function () {
this.person(new Person("Garth"));
};
this.changeName = function(name) {
this.person().name(name);
};
};

window.test = new ViewModel();
ko.applyBindings(window.test);

// this is where I'm confused
setTimeout(test.createPerson.bind(test),1000);
setTimeout(function () {
test.changeName("WoOoOoOo");
}, 2000);

最佳答案

因为person也是可观察的,并且您也对其进行绑定(bind):

<div data-bind="with: person">
<h1 data-bind="text: name"></h1>
</div>

person observable 已更新,即使是全新的 Person对象,相关绑定(bind)被重新评估,因此 <h1> 上的绑定(bind)再次检查并应用 person 的新值,所以它找到"new" name那时的属性(property)。

您的代码中任何时候都没有设置 test.person为了变得不同,您需要更新它已经指向的可观察对象的内容。如果你这样做了:

test.person = new Person();  //or
test.person = ko.observable(new Person(''));

它将不再更新 DOM,因为您此时已经破坏了绑定(bind),但因为您只更新了现有的 person可以观察到,一切都很好。

关于javascript - 当后代属性所在的对象被替换时,Knockout 如何知道更新其后代属性的绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30399925/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com