knockout.js 模板中带有条件HTML标记的挖空组件:

mnemlml8  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(164)

我是KO和KO组件的新手。
我现在有一个custom-component.js,它可以很好的工作,来设计我们项目的所有输入。但是,我想得到一个完全相同的组件来处理文本区域
目前,此组件的template:部分如下所示:

viewModel: function (params) {

    /*  */

    template: '<span data-bind="template: { afterRender: afterRender }">' +
        '<label class="custom-label" data-bind="css:{\'custom-label-active\':focused}, text:label"></label>' +
        '<input class="form-control" type="text" data-bind="enable: enable, valueUpdate: \'input\', css:{\'custom-label-input\':focused}, attr:{placeholder:label, id:id, type: type}, event:{focus:focus,blur:blur},value:value"/>' +
        '</span>'
});

我应该如何更新它,使它工作的textareas太?
我尝试添加一个如下所示的默认参数:

this.element = (params.element == undefined || params.element == null) ?  'input' : params.element

但我不知道如何更新我的减价?
我是否应该将'<input'替换为类似'<' + self.element + '...>'的内容
那么valueUpdate呢?(我对这一切都很陌生,如果这是一个愚蠢的问题,很抱歉)
谢谢你

y4ekin9u

y4ekin9u1#

您的模板由所有组件示例共享。除了使用knockout自己的iftemplatewith等绑定之外,没有办法使用组件的参数动态更新它。
如果你知道它只支持有限的元素集,你可以为每个元素添加一个if语句。例如:

<!-- ko if: element === "input" -->
<input/>
<!-- /ko -->

<!-- ko if: element === "textarea" -->
<textarea></textarea>
<!-- /ko -->

如果你希望能够传递 any 元素,你可以考虑使用componentInfo.templateNodes '。如果这是你想要的,告诉我。我可以扩展我的答案,但这是一个更复杂的方法。
下面是一个使用if绑定的示例:
第一个

相关问题