页面上显示了步骤列表。某些步骤(但不是全部)将有 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/Knockout:
//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());
您只需要使用 html
绑定而不是 text
绑定:
template: "<li data-bind='html: vm.message'>vm.onChangeElement</li>"
更新的小提琴