2

ASP.NET MVC+Knockout を Knockout だけに置き換える作業を行っています。ASP.NET を削除して、静的な js + html だけを取得したいと考えています。

私の ASP.NET ビューは部分ビュー (私のプロジェクトではウィジェットと呼んでいます) で構成されており、この部分ビューは簡単に 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 };


Knockout で _WidgetLayout.cshtml を置き換えるには?

4

1 に答える 1

2

これを行う方法はいくつかあります。私が考えることができる最も簡単な方法は、テンプレート コンポーネントを用意し、その中にウィジェットをネストすることです。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 のドキュメントを参照してください。

ここで完全な JS フィドルを参照してください: http://jsfiddle.net/Quango/a8h2bwtc/

ここに示すように、名前を静的な値ではなく監視可能にすることもできることに注意してください: http://jsfiddle.net/Quango/tnphvvgd/

于 2014-11-14T14:05:59.280 に答える