如何將HTML添加到此Knockout.js Viewmodel變量中？

Question

我有一個頁面上顯示的步驟列表。一些步驟（，但不是全部）將有1-3個子步驟。我在想這樣做的最簡單方法就是在viewmodel的每個步驟聲明中手動編寫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()); 

Answer 1

你只需要使用html binding代替text綁定：

template: "<li data-bind='html: vm.message'>vm.onChangeElement</li>" 

Updated fiddle