javascript - この Knockout.js Viewmodel 変数に HTML を追加するにはどうすればよいですか?

Question

ページに表示されるステップのリストがあります。一部のステップ (すべてではない) には、1 ～ 3 のサブステップがあります。これを行う最も簡単な方法は、ビューモデルの各ステップ宣言内に HTML を手動で記述することだと考えていました。

以下のコードを見ると、私がやりたいことは次のようなものです。

this.sidebarStepModel1 = new SidebarStepModel();
this.sidebarStepModel1.message("step 2 <ul><li>substep 1</li><li>substep2</li></ul>");

問題は、そこに書かれた HTML が ではstringなく として解釈されることHTMLです。HTML を実際の HTML として解釈するようにするにはどうすればよいですか?

フィドル: https://jsfiddle.net/8o31m6rq/2/

HTML:

<ul>
    <sidebar-step params="vm: sidebarStepModel0"></sidebar-step>
    <sidebar-step params="vm: sidebarStepModel1"></sidebar-step>
    <sidebar-step params="vm: sidebarStepModel2"></sidebar-step>
</ul>

JavaScript/ノックアウト:

//custom element <sidebar-step>
ko.components.register("sidebar-step", {
    synchronous: true,
    viewModel: function (params) {
        this.vm = params.vm;
    },

    template: "<li data-bind='text: vm.message'>vm.onChangeElement</li>"
});

// model
var SidebarStepModel = function () {
    this.message = ko.observable("step description");
};

// viewmodel
var OrderGuideViewModel = function () {

    this.sidebarStepModel0 = new SidebarStepModel();
    this.sidebarStepModel0.message("step 1");

    this.sidebarStepModel1 = new SidebarStepModel();
    this.sidebarStepModel1.message("step 2");

    this.sidebarStepModel2 = new SidebarStepModel();
    this.sidebarStepModel2.message("step 3");
};

ko.applyBindings(new OrderGuideViewModel());