如何在父级布局中使用挖空组件视图？

debugcn 发表于 Dev

帕维尔·马蒂诺夫（Pavel Martynov）

我正在研究仅用淘汰赛替代ASP.NET MVC +淘汰赛，我想删除ASP.NET并仅获取静态js + html。

我的ASP.NET视图由Partial视图组成（我在项目中称其为小部件），该Partial视图很容易用Knockout组件替换。.但是我有一个问题：ASP.NET Partial视图有一个Layout（每个小部件都有一些html装饰）），如何实现类似的Knockout组件视图？

简化示例。旧的asp.net方案：

View.cshtml：

<div>
    @Html.Partial("SomeWidget")
</div>

SomeWidget.cshtml：

@{
    Layout = "~/Views/Shared/_WidgetLayout.cshtml"; <!-- parent layout for widget -->
}
<span>This is some widget</span>

_WidgetLayout.cshtml：

<div>
    <span>This is decorator for every widget</span>
    @RenderBody() <!-- render widget view here (SomeWidget.cshtml in this example) -->
</div>

新的仅限淘汰赛方案：

View.html：

<div>
    <some-widget></some-widget>
</div>

View.js：

ko.components.register('some-widget', { require: 'app/SomeWidget' });

SomeWidget.html：

<span>This is some widget</span>

SomeWidget.js：

var view = require('text!/views/SomeWidget.html');
return { template: view };

如何在淘汰赛中替换_WidgetLayout.cshtml？

广吾

您可能有几种方法可以执行此操作。我能想到的最简单的方法是拥有一个模板组件，然后将小部件嵌套在其中。KO组件支持嵌套。

您可以这样定义模板组件：

    ko.components.register("widget-template", {
        viewModel: function(params) {
            var self=this;
            self.WidgetName = params.widget;
        },
        template: "<div class='b'><span>This is decorator for every widget</i>
<div data-bind='component: { name: WidgetName }'></div></div>"
    });

要使用此功能，您可以将template-widget放入HTML中，然后将小部件的名称作为参数传递：

<widget-template params="widget: 'widget1'"></widget-template>

然后，将小部件定义为另一个组件：

ko.components.register("widget1", {
    template: "<h3>Widget One</h3>"});

因此，现在您有了一个可重复使用的模板，可以包装任何组件。您可以在Knockout文档中看到有关此绑定的更多信息。

在此处查看完整的JS小提琴：http：//jsfiddle.net/Quango/a8h2bwtc/

请注意，您还可以将名称设置为可观察的名称，而不是静态值，如下所示：http : //jsfiddle.net/Quango/tnphvvgd/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev