从淘汰js组件中获取数据

Getting data out of knockout js components

本文关键字：获取 数据 组件 淘汰 js      更新时间：2023-09-26

我在互联网上看到了很多关于如何使用敲除js组件显示数据的例子。params功能可以很容易地将任何内容传递到显示中。但我从未见过如何从组件中获取数据。

一个数据如何将某个东西绑定到组件上？

示例：

如果我想要一个自动序列化表单输入的组件，该怎么办。

ko.components.register('form-serializer', {
    viewModel: function(params){
        this.value = ko.observable();
        this.name = params.name
        this.serialize = function(){
            return this.name + '=' + this.value();
        }
    },
    template: '<input data-bind="textInput: value"/>'
}

如何从视图模型调用serialize？

将对象（通常是可观察的，但不一定是）作为参数传递给组件可以让组件和父级都读取和写入它，所以这不是一个方向。您不仅仅是在传入（或传出）数据。您正在共享资源。

您可以使用ko.dataFor来获取绑定到该组件的视图模型，然后从中调用成员函数或变量。但由于某些特殊原因，我不喜欢使用它，因为它会提示我的结构有问题。

我更喜欢的另一种方式是将组件的视图模型放在另一个变量中，这样你就可以直接访问它

类似：

var formSerializer = function(params){
    this.value = ko.observable();
    this.name = params.name
    this.serialize = function(){
        return this.name + '=' + this.value();
    }
};
var serializer;
ko.components.register("form-serializer", {
    template: '<input data-bind="textInput: value"/>',
    viewModel: {
        createViewModel: function(params){
            serializer = new formSerializer(params);
            return serializer;
        }
    }
});

因此，您可以通过serializer.serialize()调用serialize函数。

相关文章：