Knockout.js如何与2向绑定组件共享可观察的viewmodel

Question

在这个简化的示例中，我试图为地址创建一个真实的来源。

vm.companies()[0].address().address1必须是可观察到的，可以共享/连接到地址输入组件。

我可能会为实现的目标使用错误的设计模式。 具体来说，这是无效的部分。

<script type="text/html" id="address-template"> <!-- Address Form Template -->
        <div>
            <input type="text" data-bind="textInput: address1" /> <!-- should bind to company.address().address1() -->
            <input type="text" data-bind="textInput: city" /> <!-- should bind to company.address().city() -->
        </div>
    </script>

在地址输入组件中键入address1 / city文本应更新页面上显示的address1 / city文本。 提前致谢！

<!DOCTYPE html>
<html>
<head>
    <title>Component Observable</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>

    <script>
        var vm = '';
        var companyList = [
            { name: 'Microsoft', type: 'Software', address: { address1: '42 Binary Ave', city: 'Seattle' } },
            { name: 'Amazon', type: 'Retail', address: { address1: '1337 Compute Street', city: 'Atlanta' } }
        ];
        var addressVm = function (params) {
            this.address1 = ko.observable(params.address().address1);
            this.city = ko.observable(params.address().city);
        };
        var companyVm = function (params) {
            this.name = ko.observable(params.name);
            this.type = ko.observable(params.type);
            this.address = ko.observable(params.address);
        };
        ko.components.register('address-input', {
            viewModel: addressVm,
            template: { element: 'address-template' }
        });
        window.onload = () => {
            function viewModel() {
                this.init = (Vm) => {
                    $.each(companyList, (i, company) => {
                        cvm = new companyVm(company);
                        this.companies.push(cvm);
                    });
                };
                this.companies = ko.observableArray([]);
                this.init(this);
            }
            vm = new viewModel();
            ko.applyBindings(vm);
        };
    </script>
</head>

<body>

    <script type="text/html" id="address-template"> <!-- Address Form Template -->
        <div>
            <input type="text" data-bind="textInput: address1" /> <!-- should bind to company.address().address1() -->
            <input type="text" data-bind="textInput: city" /> <!-- should bind to company.address().city() -->
        </div>
    </script>

    <div data-bind="foreach: { data: companies, as: 'company' }">
        <div>

            <input type="text" data-bind="textInput: company.name" />
            <div data-bind="text: company.name"></div>

            <input type="text" data-bind="textInput: company.type" />
            <div data-bind="text: company.type"></div>

            <div data-bind="text: company.address().address1"></div>
            <div data-bind="text: company.address().city"></div>

            <address-input params="address: company.address()"></address-input>

        </div>
        <hr />
    </div>

</body>
</html>

Answer 1

对地址和公司视图模型进行以下更改可获得所需的结果。

从addressVm视图模型中删除Observable声明，然后将属性放在companyVm 。

        var addressVm = function (params) {
            this.address1 = params.address().address1;
            this.city = params.address().city;
        };
        var companyVm = function (params) {
            this.name = ko.observable(params.name);
            this.type = ko.observable(params.type);
            this.address = ko.observable({
                address1: ko.observable(params.address.address1),
                city: ko.observable(params.address.city)
            });
        };

现在，该组件与其父对象绑定到相同的可观察对象。 在地址组件中键入文本将更新在组件外部显示的文本。