knockoutjs可重用模板控件

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

對於的ViewModels和組件之間的通信，使用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>