Question

我想在knockoutjs中创建一个可重复使用的自定义控件，我已经在knockout中编写了以下代码。当用户点击NF字段文本框切换到下拉列表时，反之亦然。我想将数据从viewmodel传递到knockout组件并希望在viewmodel中获取数据。

ko.components.register('nf-editor', {
    viewModel: function (params) {
        var self = this;
        self.options = ko.observableArray(params && params.data || '');
        self.text=ko.observable(params && params.text || '');
        self.optionText=ko.observable(params && params.optionText || '');
        self.optionsCaption=ko.observable(params && params.optionsCaption || '');


        self.isNF = ko.observable(false);
        self.change = function () {
            self.isNF(!self.isNF());
        };

    },
    template: '<input maxlength="50" data-bind="textInput:text,visible:!isNF()" type="text" /> ' +  '<select name="rep_prefix_nfddl" data-bind="optionsText:optionText,options: options,visible:isNF" />'+
  '<a href="#" data-bind="click:change">NF</a>'

});

function VM() {
    var self = this;
    self.options = ["Test", "Test1"];
    self.optionText="Demo";
    self.text="Test";

}

ko.applyBindings(new VM());


<div data-bind='component: { name: "nf-editor",  params: { data: options,text:text }
}'></div>

<div data-bind="text:text"/>

JSFiddle

Answer 1

对于ViewModel和组件之间的通信，请使用ko.postbox。

从小提琴中，您可以尝试this之类的内容。

ko.components.register('nf-editor', {
    viewModel: function (params) {
        this.options = ko.observableArray(params && params.data || '');

        var self = this;
        self.isNF = ko.observable(false);
        self.change = function () {
            self.isNF(!self.isNF());
        };
        self.selectedInputValue = params.text;
        self.selectedOptionsValue = params.selectedOptionsValue;
    },
    template: '<input maxlength="50" data-bind="visible:!isNF(), textInput: selectedInputValue" type="text" /> ' +  '<select name="rep_prefix_nfddl" data-bind="value: selectedOptionsValue, options: options,visible:isNF" />'+
  '<a href="#" data-bind="click:change">NF</a>'

});

function VM() {
    var self = this;
    self.options = ["C#", "DSA"];
    self.text = ko.observable();
    self.selectedOptionsValue = ko.observable();
}

ko.applyBindings(new VM());

Answer 2

如果代替交换元素的visible绑定，将元素转换为模板，交换模板，该怎么样？

父和组件可以共享options和text等可观察对象以及要包含在组件参数中的任何其他可观察对象。

ko.components.register('nf-editor', {
  viewModel: function(params) {
    var self = this;
    self.options = params.options;
    self.text = params.text;
    self.isNF = ko.observable(false);
    self.change = function() {
      self.isNF(!self.isNF());
    };
    self.whichControl = ko.computed(function() {
      return self.isNF() ? 'select-template' : 'input-template';
    });
  },
  template: '<!-- ko template: whichControl --><!-- /ko -->' +
  '<template id="select-template">' +
  '  <select name="rep_prefix_nfddl" data-bind="options: options" />' +
  '</template>' +
  '<template id="input-template">' +
  '  <input maxlength="50" type="text" data-bind="value: text"/>' +
  '</template>' +
  '<a href="#" data-bind="click:change">NF</a>'

});

function VM() {
  var self = this;
  self.options = ko.observableArray(["C#", "DSA"]);
  self.text = ko.observable('initial');
}

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind='component: { name: "nf-editor",  params: { options: options, text: text }}'>
</div>

knockoutjs可重复使用的模板控件

2 个答案: