如何在我的淘汰组件模板中访问我的视图模型变量？答案

【问题标题】：How do I access my viewmodel variables in my knockout component template?如何在我的淘汰组件模板中访问我的视图模型变量？
【发布时间】：2015-08-26 02:01:19
【问题描述】：

我正在尝试使用 Knockout 组件/模板创建说明步骤列表。

UL 将包含一个步骤列表（使用敲除注册的自定义元素sidebar-step），这只是<li></li> 的模板。我的模型中有另一个值 this.testVar 部分，它可能包含 <li> 的属性，例如 class，或者可能是 "data-customAttribute"。 p>

我的问题是，如何将我的 testVar 值包含到模板中？我想要它，以便它可以输出如下行：

<sidebar-step class=*testVar* params="vm: sidebarStepModel">Message 1</sidebar-step>

小提琴：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());

【问题讨论】：

作为另一个参数传递？ jsfiddle.net/uu4hzc41/2
@RoyJ 也许可以，但是如果我想将元素的样式类设置为 testVar 中的任何内容怎么办？

标签： javascript html knockout.js knockout-components knockout-templating

【解决方案1】：

您可以在自定义标签上使用data-bind。设置类，

<sidebar-step data-bind="css:sidebarStepModel.testVar" params="vm: sidebarStepModel"></sidebar-step>

https://jsfiddle.net/uu4hzc41/3/

【讨论】：

甜，不知道你可以那样做，你