3

因此，随着组件和自定义元素的引入，封装逻辑和标记似乎要容易得多，但是当您需要传入视图模型时，我有点不确定如何在 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-viewis 在具有正确模板名称等的脚本标记中并且是正确的模板，然后#partial-datais 在主视图中并希望在页面上显示所有实例。现在一切正常，但我想转移到一个更多基于组件的模型，目前我们可以看到模板依赖于 SomePartialViewModel 数据，所以我们有我们的模板和该组件的视图模型，但是问题就在附近将视图模型放入组件中，因为当前您在设置时注册组件，然后使用参数填充它的块。但是在这种情况下，我想在绑定时将视图模型传递给组件......

所以我想知道如何才能做到这一点，因为我想我可以使用模板注册组件但没有视图模型，但是是否有data样式绑定的概念，我可以在其中设置$data属性并从模板移动到 foreach绑定视图？

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

4

2 回答 2

1

There are loads of ways to pass values and/or viewmodels to components using the params.

If you use the createViewModel method, you can just pass in the viewmodel via the params and use the partial viewmodel as the component 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>"
});

You can see a working example in this fiddle: http://jsfiddle.net/Quango/fn1ymf9w/

于 2014-11-14T14:30:23.270 回答
0

您可以在 viewModels 下定义 viewModels :)

就像定义 observable 一样，您可以定义另一个 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 应用程序

于 2014-09-15T08:03:17.770 回答