时间戳

首页 > 解决方案 > 如何将数据向下传递到多层敲除组件

javascript - 如何将数据向下传递到多层敲除组件

问题描述

我有一种情况，我试图将一些重复的代码包装到组件中。这工作正常，直到我想将一些数据从父范围传递到已嵌套在多个其他组件中的组件。

在我的示例中，我希望能够获取位于顶级范围内的 someobservable 值，一直到 myrow 组件以在跨度内显示。理想情况下，我不想每次都手动向下传递数据，有没有办法让数据只从父级继承？

我的两个新组件相互嵌套的顶级范围

<mygroup>
    <myrow>
        <span data-bind="text: someobservable()"></span>
    </myrow>
</mygroup>

我可以通过在对象之前添加来让它做我想做的事情$context.$parentContext.$parent.，但理想情况下我不想这样做，因为它会使一切变得非常混乱。

<mygroup>
    <myrow>
        <span data-bind="text: context.$parentContext.$parent.someobservable()"></span>
    </myrow>
</mygroup>

mygroup.js - 我的第一个组件

import template from './mygroup.html';
const ko = require('knockout');

const viewModel = function (params) {
    const self = this;
};

ko.components.register('mygroup', { viewModel, template });

mygroup.html

<div>
    <!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->
</div>

myrow.js - 我的第二个组件

import template from './myrow.html';
const ko = require('knockout');

const viewModel = function (params) {
    const self = this;
};

ko.components.register('myrow', { viewModel, template });

myrow.html

<div>
    <!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->
</div>

标签： javascriptknockout.js

解决方案

我找到了一个我对结果感到半满意的解决方案，如果有人能提出更好的解决方案，我很想听听。

<mygroup params="data: $data">
    <myrow params="data: $data">
        <span data-bind="text: someobservable()"></span>
    </myrow>
</mygroup>

mygroup.js - 我的第一个组件

import template from './mygroup.html';
const ko = require('knockout');

const viewModel = function (params) {
    const self = this;
    this.data = ko.observable(params.data);
};

ko.components.register('mygroup', { viewModel, template });

mygroup.html

<div>
    <!-- ko template: { nodes: $componentTemplateNodes, data: data } --><!-- /ko -->
</div>

myrow.js - 我的第二个组件

import template from './myrow.html';
const ko = require('knockout');

const viewModel = function (params) {
    const self = this;
    this.data = ko.observable(params.data);
};

ko.components.register('myrow', { viewModel, template });

myrow.html

<div>
    <!-- ko template: { nodes: $componentTemplateNodes, data: data } --><!-- /ko -->
</div>

推荐阅读