如何在我的 Knockout 组件模板中访问我的视图模型变量?
How do I access my viewmodel variables in my knockout component template?
我正在尝试使用 Knockout 创建指令步骤列表 components/templates。
UL 将包含一个步骤列表(使用敲除注册的自定义元素 sidebar-step),它只是 <li></li>
的模板。我的模型有另一个值 this.testVar
部分,它可能包含 <li>
的属性,例如 class,或者 "data-customAttribute".
我的问题是,如何将我的 testVar
值包含到模板中? 我想要它,以便它可以输出如下一行:
<sidebar-step class=*testVar* params="vm: sidebarStepModel">Message 1</sidebar-step>
Fiddle: https://jsfiddle.net/uu4hzc41/1/
HTML:
<ul>
<sidebar-step params="vm: sidebarStepModel"></sidebar-step>
</ul>
JavaScript:
ko.components.register("sidebar-step", {
viewModel: function (params) {
this.vm = params.vm;
},
template: "<li data-bind=\'text: vm.message\'></li>"
});
var SidebarStepModel = function () {
this.message = ko.observable("step description");
this.testVar = ko.observable("some value");
};
var ViewModel = function () {
this.sidebarStepModel = new SidebarStepModel();
this.sidebarStepModel.message("Message 1");
this.sidebarStepModel.testVar("69");
};
ko.applyBindings(new ViewModel());
您可以在自定义标签上使用 data-bind
。设置class,
<sidebar-step data-bind="css:sidebarStepModel.testVar" params="vm: sidebarStepModel"></sidebar-step>
我正在尝试使用 Knockout 创建指令步骤列表 components/templates。
UL 将包含一个步骤列表(使用敲除注册的自定义元素 sidebar-step),它只是 <li></li>
的模板。我的模型有另一个值 this.testVar
部分,它可能包含 <li>
的属性,例如 class,或者 "data-customAttribute".
我的问题是,如何将我的 testVar
值包含到模板中? 我想要它,以便它可以输出如下一行:
<sidebar-step class=*testVar* params="vm: sidebarStepModel">Message 1</sidebar-step>
Fiddle: https://jsfiddle.net/uu4hzc41/1/
HTML:
<ul>
<sidebar-step params="vm: sidebarStepModel"></sidebar-step>
</ul>
JavaScript:
ko.components.register("sidebar-step", {
viewModel: function (params) {
this.vm = params.vm;
},
template: "<li data-bind=\'text: vm.message\'></li>"
});
var SidebarStepModel = function () {
this.message = ko.observable("step description");
this.testVar = ko.observable("some value");
};
var ViewModel = function () {
this.sidebarStepModel = new SidebarStepModel();
this.sidebarStepModel.message("Message 1");
this.sidebarStepModel.testVar("69");
};
ko.applyBindings(new ViewModel());
您可以在自定义标签上使用 data-bind
。设置class,
<sidebar-step data-bind="css:sidebarStepModel.testVar" params="vm: sidebarStepModel"></sidebar-step>