Question

我有几个文本输入组件来处理不同类型的输入（例如alpha-only，alpha-numeric和free-form）。我可以为每种输入类型创建单独的组件，但实际上，除了绑定属性（例如下面的 alphaText ）之外，它们都是相同的。

e.g。

 <input type="text" data-bind="
  attr: {
    id: id,
  },
  alphaText: model
 ">

有没有办法根据参数在viewModel中动态分配模板（例如类型：'numeric'）

<div data-bind="
    component: {
      name: 'textField',
      params: {
         type: 'numeric',
         model: fieldModel,
       }
    }">
</div>

或者，有没有办法从viewModel中动态操作数据绑定值？

Answer 1

当然，您可以在组件中拥有可选模板。这只是在组件模板中的某个元素上进行模板绑定，并且绑定到组件的viewmodel中的observable（其值作为参数传递）。

ko.components.register('textField', {
  viewModel: function(params) {
    this.model = ko.observable(params.type);
  },
  template: {
    element: 'text-field'
  }
});

var vm = {
  fieldModel: ko.observable('alpha')
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<template id="text-field">
  <template id="numeric">
    This is a numeric template
  </template>
  <template id="free-form">
    This is a free-form template
  </template>
  <div>This is a textField</div>
  <div data-bind="template: model"></div>
</template>

<div data-bind="
    component: {
      name: 'textField',
      params: {
         type: 'numeric',
         model: fieldModel,
       }
    }">
</div>
<div data-bind="
    component: {
      name: 'textField',
      params: {
         type: 'free-form',
         model: fieldModel,
       }
    }">
</div>

Knockout从viewModel动态应用模板

1 个答案: