我正在致力于用 Knockout 替换 ASP.NET MVC+Knockout,我想删除 ASP.NET 并只获取静态 js + html。
我的 ASP.NET View 由部分 View 组成(我在项目中称它们为小部件),这个部分 View 很容易用 Knockout 组件替换..但我有一个问题:ASP.NET 部分 View 有一个布局(一些 html 装饰)对于每个小部件),我如何实现类似的 Knockout 组件 View ?
简化示例。旧的asp.net方案:
查看.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>
新的仅限 knockout 方案:
查看.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 };
如何在Knockout中替换_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>"
});
要使用此功能,请将模板小部件放入 HTML 中,并将小部件的名称作为参数传递:
<widget-template params="widget: 'widget1'"></widget-template>
然后将小部件定义为另一个组件:
ko.components.register("widget1", {
template: "<h3>Widget One</h3>"});
现在您有了一个可以包装任何组件的可重用模板。您可以在 Knockout documentation 中查看有关此绑定(bind)的更多信息。 .
在此处查看完整的 JS fiddle :http://jsfiddle.net/Quango/a8h2bwtc/
请注意,您还可以将名称设为可观察值而不是静态值,如下所示: http://jsfiddle.net/Quango/tnphvvgd/
关于asp.net-mvc - 如何将 knockout 组件 View 与父布局一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26880906/