Question

在运行时使用Knockout 3.4.0和MVC试图找出如何创建动态UI的方法。

要求：使用knockout js将SSRS SOAP报告与MVC网站集成，不使用ReportViewer，并使用从SSRS服务器接收的参数数据动态构建报告过滤器接口。

方法：我已成功设法能够以实用方式检索所有参数数据，并创建一个带有硬编码过滤器的报告，该过滤器使用敲除显示在视图中。

问题：每个报告都会有不同的过滤参数，例如日期，日期，设施，地区等。我正在努力弄清楚如何使用淘汰赛能够动态构建UI以显示每个报告过滤器，并且还能够在根视图模型中动态包含过滤器值，以便将过滤器发布回服务器。

尝试：我务实地确定了给定参数的UI类型应该是什么，即＆＃39; TEXT，BOOLEAN，DROPDOWN，DATETIME等，并在inital viewModel中传递它在第一次加载时绑定到我的视图。我已经探索了淘汰组件的概念，并且实际上设法创建了一个基本组件，但我无法解决如何绑定它或之后检索绑定数据。

我有一个foreach循环，它迭代参数集合，检查UI类型，然后将嵌入适用于它的UI类型的组件，例如日期选择器或下拉列表。现在每种类型可以有更多，但是需要对它们进行唯一标识，以便在回发数据时检索不同的值。

我的一种方法如下;

DropDownList component

ko.components.register("dropDownList", {
viewModel: function (data) {
    var self = this;
    self.validValues = ko.observableArray(data.ValidValues);
},

template: "<select data-bind='options: validValues, optionsText: 'Label', optionsValue: 'Value'></options>"

}）;

这是我的观点，只有＆＃39; DROPDOWN＆＃39;此代码中的类型当前正在使用组件

        <div id="parameters" data-bind="foreach: parameters">
        <!-- ko if: PromptUser() === true && Prompt() !== null && Prompt() !== "" --> @*Only show parameters that should be visible*@
            <!-- ko if: UiType() === 'DATETIME' -->
                <div data-bind="template: { name: 'date-template', data: $data }"></div>
            <!-- /ko -->
            <!-- ko if: UiType() === 'BOOLEAN' -->
                <div data-bind="template: { name: 'boolean-template', data: $data }"></div>
            <!-- /ko -->
            <!-- ko if: UiType() === 'TEXT' -->
                <div data-bind="template: { name: 'text-template', data: $data }"></div>
            <!-- /ko -->
            <!-- ko if: UiType() === 'MULTI' -->
                <div data-bind="template: { name: 'multi-template', data: $data }"></div>
            <!-- /ko -->
            <!-- ko if: UiType() === 'DROPDOWN' -->
                <div data-bind='component: { name: "dropDownList", params: { data: $data }}'></div>           
            <!-- /ko -->
        <!-- /ko -->
    </div>

您可以想象，我可以使用1,2,3或更多下拉列表，所有这些都有不同的数据。

我怎样才能让它们与众不同？我如何能够访问所选值？组件如何与父视图模型交互？

但是我的数据永远不会绑定到组件模板。我想通过在网上搜索过多来使自己蒙羞，但必须有办法在运行时这样做。

我很感激任何指导。

Answer 1

也许组件标记应该看起来像<dropDownList params="value: $data"></dropDownList>（我不确定参数中的值绑定，look over the docs并且在它被绑定之前用它来捣乱。）

Knockout JS，动态用户界面，组件＆amp;的ViewModels

1 个答案: