此内容基本上是原始材料的翻译。目的是了解 Magento 2 的 KnockoutJs 并用葡萄牙语创建有关 KnockouJs 的内容。
KnockoutJs 引入了 observables 的概念,这些属性是可以被监视并在其值发生变化时自动更新的属性。此功能允许用户界面动态响应 模型.
数据的变化要在 KnockoutJs 中创建可观察对象,您可以使用 ko.observable() 函数并为其分配初始值。要访问 observable 的当前值,您可以将其视为函数。要仅观察没有初始值的事物,只需调用不带参数的 Observable 属性即可。
let myObservable = ko.observable('Inicial'); console.log(myObservable()); // Irá imprimir 'Inicial' myObservable('Novo valor'); console.log(myObservable()); // Irá imprimir 'Novo valor'
observables 中的 订阅 是一种机制,允许您在 observable 的值发生变化时收到通知。它们对于跟踪可观察量中的变化并对这些变化做出反应、更新用户界面或在必要时采取其他操作至关重要。
subscribe() 方法 *** 接收一个 *callback 函数,每当 observable 的值被修改时就会执行该函数。 callback 函数接收 observable 的新值作为参数。该函数接受三个参数:callback是每当通知发生时调用的函数,target(可选)在函数callback中定义this的值和event(可选;默认为change)是接收通知的事件名称。
let myObservable = ko.observable('Inicial'); console.log(myObservable()); // Irá imprimir 'Inicial' myObservable('Novo valor'); console.log(myObservable()); // Irá imprimir 'Novo valor'
另一个重要的一点是可以将订阅存储在变量中,并在必要时使用 dispose() 方法取消订阅。当您想要暂时或永久禁用 UI 更新以响应可观察值的更改时,这非常有用。
let myObservable = ko.observable(0); // Criando uma subscription no observable myObservable.subscribe(function (newValue) { console.log('Novo valor do observable:', newValue); }, scope, event);
确定可观察量类型的方法
Observables 数组 是 observables 的扩展,用于处理需要可观察的数据列表。与标准 JavaScript 数组 不同,Observable 数组 允许您自动跟踪列表数据的更改并响应式更新用户界面。
let myObservable = ko.observable('Inicial'); console.log(myObservable()); // Irá imprimir 'Inicial' myObservable('Novo valor'); console.log(myObservable()); // Irá imprimir 'Novo valor'
Observables 数组 具有特定的方法,允许您以反应方式添加、删除和操作项目。其中一些方法是:
对于修改数组内容的函数,例如 push 和 splice,KO 方法会自动触发依赖跟踪机制,以便所有注册的监听器都收到更改通知并且你的界面会自动更新,这意味着使用 KO 方法(observableArray.push(...) 等)和原生 JavaScript array 方法(observableArray() .push(.. .)),因为后者不会向 array
订阅者发送任何内容已更改的通知。
虽然可以像任何其他可观察对象一样使用 subscribe 并访问 observableArray,但 KnockoutJs 还提供了一种超级快速的方法来找出 array observable 确实发生了变化(哪些项目刚刚被添加、删除或移动)。您可以订阅数组
更改,如下所示:
let myObservable = ko.observable('Inicial'); console.log(myObservable()); // Irá imprimir 'Inicial' myObservable('Novo valor'); console.log(myObservable()); // Irá imprimir 'Novo valor'
计算的 Observables 是依赖于一个或多个 observables 的函数,只要这些依赖项发生任何变化,就会自动更新。每次其依赖项发生更改时,该函数都会被调用一次,并且它返回的任何值都将传递给 observables,例如 UI 元素或其他 计算的 observables 。
Compated Observables 和 Observables 之间的主要区别是 Compulated Observables 不直接存储值;相反,它们依赖其他可观察值来计算它们的价值。这意味着当 Compated Observable 所依赖的任何 observables 被修改时,它的值总是会自动更新。
let myObservable = ko.observable(0); // Criando uma subscription no observable myObservable.subscribe(function (newValue) { console.log('Novo valor do observable:', newValue); }, scope, event);
计算可观察量的方法
这 ko.compulated 的第二个参数在评估计算的
observable 时设置 this 的值。如果不传递它,就不可能引用 this.firstName() 或 this.lastName()。有一个约定可以避免完全跟踪它:如果 viewmodel 的构造函数将对此的引用复制到另一个变量(传统上称为 self)中,则可以在整个 viewmodel 并且不必担心它被重新定义以引用其他内容。
let myObservable = ko.observable('Inicial'); console.log(myObservable()); // Irá imprimir 'Inicial' myObservable('Novo valor'); console.log(myObservable()); // Irá imprimir 'Novo valor'
因为 self 在函数闭包时被捕获,所以它在任何嵌套函数中都保持可用和一致,例如 计算的可观察值的求值器。当涉及到事件处理程序时,此约定更加有用。
如果计算的可观察量只是根据一些可观察的依赖关系计算并返回一个值,最好将其声明为ko.pureCompulated而不是ko.compulated。
let myObservable = ko.observable(0); // Criando uma subscription no observable myObservable.subscribe(function (newValue) { console.log('Novo valor do observable:', newValue); }, scope, event);
当计算的可观察量被声明为pure时,其求值器不会直接修改其他对象或状态,KnockoutJs可以更有效地管理其重新求值和内存使用。如果没有其他代码主动依赖它,KnockoutJs 将自动挂起或释放它。
可写计算的可观察量是计算的可观察量的扩展,它允许创建计算的可观察量,可以通过读取和写入来更新。与传统的 Compulated Observables 不同,传统的 Compulated Observables 仅根据其他 observables 计算其值,并且不直接存储值,
Writable Computed Observables可以存储值,并提供更新该值的函数必要时。 要创建一个可写计算的Observable,需要将 ko.compulated 函数与包含两个主要属性的配置对象一起使用:读和写。 read 属性包含计算函数来确定 observable 的值,而 write 属性包含当您想要更新
observable 的值时调用的函数。以上是Observables 在 KnockoutJs 中如何工作的详细内容。更多信息请关注PHP中文网其他相关文章!