Question

因此，通过引入组件和自定义元素，封装逻辑和标记似乎要容易得多，但是当您需要传入视图模型时，我有点不确定如何在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服务或其他东西，并使用partial的实例填充其数组。然后这将使用如下：

<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数据，所以我们有我们的模板和我们的组件的viewmodel，但问题出在将viewmodel放入组件中，因为当前在设置时注册组件，然后使用params填充它的块。但是在这种情况下，我想在绑定时将viewmodel传递给组件...

所以我想知道如何做到这一点，因为我想我可以用模板注册组件但没有viewmodel，但是有data样式绑定的概念我可以设置{ {1}}属性并从视图上的模板绑定移动到foreach？

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

Answer 1

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

如果使用createViewModel方法，则可以通过参数传递viewmodel并使用部分viewmodel作为组件viewmodel：

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/

Answer 2

您可以在viewModels下定义viewModels：）

就像定义一个observable一样，你可以定义另一个viewModel并使用“with”绑定，你可以创建一个你想要的基于组件的模型。

首先分别创建组件和子组件以及子子组件等viewModels。

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应用程序

foreach和模板中的Knockout组件

2 个答案: