Question

我在互联网上看到很多关于如何使用knockout 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"/>'
}

如何从我的视图模型中调用序列化？

Answer 1

将一个对象（通常是一个可观察的，但不一定是）作为参数传递给组件允许组件和父对象进行读写，因此它不是一个方向。您不只是在（或）中传递数据。你正在分享资源。

Answer 2

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

我更喜欢的另一种方法是将组件的viewmodel放到另一个变量中，以便您可以访问它。

像：

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;
        }
    }
});

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

从淘汰赛js组件中获取数据

2 个答案: