淘汰foreach和模板中的组件

Knockout components within foreach and templates

本文关键字：组件 foreach 淘汰      更新时间：2023-09-26

因此，随着组件和自定义元素的引入，封装逻辑和标记似乎要容易得多，但当您需要传入视图模型时，我有点不确定如何使用foreach部分中的组件。

所以我目前的场景是，我有一个视图模型，看起来像：

function SomePartialViewModel()
{
    this.Name = ko.observable();
    this.Score = ko.observable();
    this.SomeDate = ko.observable();
}
function SomeViewModel()
{
    this.DataFromWebServiceCall = ko.observableArray();
    this.GetDataFromServer = function(){
        // get some data from service and populate DataFromWebSeriviceCall with instances of SomePartialViewModel
    }
}

现在，在上面的文章中，我们有一个POJO来包含部分数据，并且我们为视图提供了一个主视图模型，它将联系web服务或其他东西，并用部分的实例填充其数组。然后这将是目前这样使用：

<div id="partial-data" data-bind="template: { name: 'partial-view', foreach: DataFromWebServiceCall }"></div>
<div class="partial-view">
    <label data-bind="text: Name"></label>
    <label data-bind="text: Score"></label>
    <label data-bind="text: SomeDate"></label>
</div>

现在假设.partial-view在一个具有正确模板名称等的脚本标记中，并且是一个正确的模板，那么#partial-data在主视图中，并且希望在页面上显示所有实例。现在一切都正常了，但我想转向一个更基于组件的模型，目前我们可以看到模板依赖于SomePartialViewModel数据，所以我们有了该组件的模板和视图模型，但问题是将视图模型放入组件，因为目前您在安装时注册了该组件，然后你可以使用params来填充它的块。然而，在这种情况下，我想在绑定时将视图模型传递给组件。。。

所以我想知道我该怎么做，因为我想我可以用模板注册组件，但没有视图模型，但有data样式绑定的概念吗？我可以在其中设置$data属性，并从视图上的模板绑定移动到foreach？

希望我试图解决的问题能被看到，任何信息都会很棒。

有很多方法可以使用params将值和/或视图模型传递给组件。

如果您使用createViewModel方法，您可以通过params传入视图模型，并使用部分视图模型作为组件视图模型：

ko.components.register("partial-view", {
    viewModel: {
        createViewModel: function (params) {
            return params.value;
        }
    },
    template: "<div>Partial View for <b data-bind='text: Name'></b></div>"
});

你可以在这个小提琴中看到一个工作示例：http://jsfiddle.net/Quango/fn1ymf9w/

您可以在viewModels下定义viewModels：）

就像定义一个可观察对象一样，您可以定义另一个viewModel，并使用"with"绑定可以创建您想要的基于组件的模型。

首先，您分别创建组件、子组件和子子组件等视图模型。

var SomePartialViewModel = function()
{
    this.Name = ko.observable();
    this.Score = ko.observable();
    this.SomeDate = ko.observable();
}
var SomeViewModel = function()
{
    this.DataFromWebServiceCall = ko.observableArray();
    this.GetDataFromServer = function(){
        // get some data from service and populate DataFromWebSeriviceCall with instances of SomePartialViewModel
    }
    this.SPM = new SomePartialViewModel(); // partial-1
}

然后创建一个MainViewModel并在此处绑定所有主要元素。

var MainViewModel =  function() {
    var self = this;
    self.SVM = new SomeViewModel();
    self.SPM = new SomePartialViewModel(); // partial-2
}
ko.applyBindings(new MainViewModel());

然后在你的html中，你可以按照你在敲除实体上创建的上下文创建你的组件

    ...
    <body>
    <div data-bind="with: SVM">
        ....
        <div data-bind="with: SPM">
            <!-- partial-1 data -->
        </div>
        ...
    </div>

    <div data-bind="with: SPM">
        <!-- partial-2 data -->
    </div>
    </body>
...

您可能需要为组件模型创建单独的文件，并使用模块化脚本加载程序（如Require-js）将所有文件绑定到一个完整的基于组件的淘汰web应用程序

相关文章：