0

Knockout コンポーネント/テンプレートを使用して、指示ステップのリストを作成しようとしています。

UL には、 の単なるテンプレートであるステップのリスト (ノックアウト登録されたカスタム要素sidebar-step<li></li>を使用) が含まれます。classや"data-customAttribute"などthis.testVarの属性を含む可能性のあるモデルの別の値の部分があります。<li>

私の質問は、自分の値をテンプレートにどのように含めることができるかということです。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());
4

1 に答える 1

1

data-bindカスタムタグで使用できます。クラスを設定するには、

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

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

于 2015-06-10T17:54:36.400 に答える