Question

我正在尝试使用Knockout组件/模板创建一个指令步骤列表。

UL将包含一系列步骤（使用淘汰赛注册的自定义元素侧栏步骤），这只是<li></li>的模板。我的模型的另一个值this.testVar可以包含<li>的属性，例如类，或者可能是＆＃34; data-customAttribute＆＃ 34。

我的问题是，如何将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());

Answer 1

您可以在自定义标记上使用data-bind。要设置课程，

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

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

如何在我的挖空组件模板中访问我的viewmodel变量？

1 个答案: