2017-04-26 1 views
0

bitte diesen einfachen Code, den Fall zu veranschaulichen:knockoutjs ändern Bindung zur Laufzeit

<select id="se"> 
    <option value="0">EN</option> 
    <option value="1">FR</option> 
    <option value="2">AR</option> 
    <option value="3">SP</option> 
</select> 
<input id="inp" data-bind='textInput: DESCRIPTION_FR' /> 


<script src="../Scripts/jquery-1.9.1.min.js"></script> 
<script src="../Scripts/knockout-3.4.0.js"></script> 

<script type="text/javascript"> 
    var PRDVM = function() { 
     var self = this; 
     self.ID = ko.observable(0); 
     self.DESCRIPTION_FR = ko.observable('FR'); 
     self.DESCRIPTION_EN = ko.observable('EN'); 
     self.DESCRIPTION_AR = ko.observable('AR'); 
     self.DESCRIPTION_SP = ko.observable('SP'); 
     self.IMAGE = ko.observable('/images/noimage.png'); 
}; 
ko.applyBindings(new PRDVM()); 
</script> 

, was ich will, ist, die Sprache zu wechseln, indem Sie die Eigenschaft Bindung des Eingangs zur Laufzeit zu ändern, indem Sie die Dropdownlist-Wechsel Auswahl

jede Idee, wie es gemacht werden kann, wäre toll.

hier die Ausgangs Geige https://https://jsfiddle.net/smtsghqm/2/

Dank.

Antwort

2

Sie könnten versuchen, eine beschreibbare berechnete Eigenschaft zu verwenden, die bestimmt, welche Observable basierend auf der ausgewählten Option angezeigt/aktualisiert werden soll. Die Bindung wäre zu den berechneten und müsste nicht geändert werden.

var PRDVM = function() { 
 
    var self = this; 
 
    self.SelectedValue = ko.observable(); 
 
    self.ID = ko.observable(0); 
 
    self.DESCRIPTION_FR = ko.observable('FR'); 
 
    self.DESCRIPTION_EN = ko.observable('EN'); 
 
    self.IMAGE = ko.observable('/images/noimage.png'); 
 
    
 
    self.DESCRIPTION = ko.computed({ 
 
     read: function(){ 
 
      switch(self.SelectedValue()){ 
 
       case "0": 
 
      \t   return self.DESCRIPTION_EN(); 
 
       case "1": 
 
      \t   return self.DESCRIPTION_FR(); 
 
      } 
 
     }, 
 
     write: function(value){ 
 
      switch(self.SelectedValue()){ 
 
       case "0": 
 
      \t   self.DESCRIPTION_EN(value); 
 
      \t   break; 
 
       case "1": 
 
      \t   self.DESCRIPTION_FR(value); 
 
      \t   break; 
 
      } 
 
     } 
 
    }) 
 
}; 
 
ko.applyBindings(new PRDVM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<select id="se" data-bind="value: SelectedValue"> 
 
    <option value="0">EN</option> 
 
    <option value="1">FR</option> 
 
    <option value="2">AR</option> 
 
    <option value="3">SP</option> 
 
</select> 
 
<br /><br /><br /> 
 
    <input id="inp" data-bind='textInput: DESCRIPTION' />