3

子マークアップを使用する空でない Knockout コンポーネントを作成できますか?

例として、次のようなモーダル ダイアログを表示するためのコンポーネントがあります。

<modal-dialog>
  <h1>Are you sure you want to quit?</h1>
  <p>All unsaved changes will be lost</p>
</modal-dialog>

コンポーネントテンプレートと一緒に：

<div class="modal">
  <header>
    <button>X</button>
  </header>

  <section>
    <!-- component child content somehow goes here -->
  </section>

  <footer>
    <button>Cancel</button>
    <button>Confirm</button>
  </footer>
</div>

出力:

<div class="modal">
  <header>
    <button>X</button>
  </header>

  <section>
    <h1>Are you sure you want to quit?</h1>
    <p>All unsaved changes will be lost</p>
  </section>

  <footer>
    <button>Cancel</button>
    <button>Confirm</button>
  </footer>
</div>
4

1 に答える 1

6

3.2 では不可能ですが、次のバージョンでは可能になります。このコミットとこのテストを参照してください。

今のところ、プロパティを介してコンポーネントにパラメーターを渡す必要があります。パラメーターparamsを期待するコンポーネントを定義します。content

ko.components.register('modal-dialog', {
    viewModel: function(params) {
        this.content = ko.observable(params && params.content || '');
    },
    template:
        '<div class="modal">' +
            '<header>' +
                '<button>X</button>' +
            '</header>' +
            '<section data-bind="html: content" />' +
            '<footer>' +
                '<button>Cancel</button>' +
                '<button>Confirm</button>' +
            '</footer>' +
        '</div>'
});

paramsプロパティを介してコンテンツ パラメータを渡す

<modal-dialog params='content: "<h1>Are you sure you want to quit?</h1> <p>All unsaved changes will be lost</p>"'>
</modal-dialog>

フィドルを見る

新しいバージョンでは、使用できます$componentTemplateNodes

ko.components.register('modal-dialog', {
    template:
        '<div class="modal">' +
            '<header>' +
                '<button>X</button>' +
            '</header>' +
            '<section data-bind="template: { nodes: $componentTemplateNodes }" />' +
            '<footer>' +
                '<button>Cancel</button>' +
                '<button>Confirm</button>' +
            '</footer>' +
        '</div>'
});

PSノックアウトの最後のバージョンを手動でビルドして、上記のコードを使用できます。

于 2014-11-23T14:55:30.603 に答える