Question

大家下午好。

我试图搜索它，但要么我正在寻找错误的东西，要么就是没有答案。我尝试使用下拉列表在淘汰赛中创建一个列表，当这些下拉值发生变化时，需要更新列表中的相应值。这是我目前的愿景＆＃34;那个，不起作用。

以下是Fiddle的代码：

＆＃13;

function pageModel(){
  var self = this
  
  // Create an observalbe array of options
  self.languages = ko.observableArray(["English","English","English"]);
  
    // Languages
  self.availableLanguages = ko.observableArray(["English", "Spanish", "German", "Russian"]);
  
  
   
} 

ko.applyBindings(new pageModel());

＆＃13;

<h4>When I update it here</h4>
<ul data-bind="foreach: languages">
    <li><select data-bind="options: $parent.availableLanguages, value: $data"></select></li>
</ul>


<h4>I want to see the update here</h4>
<ul data-bind="foreach: languages">
    <li data-bind="text: $data"></li>
</ul>

＆＃13;

有人能提出什么建议吗？谢谢。

Answer 1

也许您需要其他数据模型 - 让我们称之为LanguageSelection：

＆＃13;

var LanguageSelection,
    PageModel,
    pageModel;

LanguageSelection = function LanguageSelection() {
  this.language = ko.observable();
};

PageModel = function PageModel(){
  this.availableLanguages = ko.observableArray([
    "English",
    "Spanish",
    "German",
    "Russian"
  ]);
  
  this.languageSelections = ko.observableArray([]);
} 

pageModel = new PageModel();

pageModel.languageSelections.push( new LanguageSelection() );
pageModel.languageSelections.push( new LanguageSelection() );
pageModel.languageSelections.push( new LanguageSelection() );

ko.applyBindings( pageModel );

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<h4>When I update it here</h4>
<ul data-bind="foreach: languageSelections">
    <li>
      <select data-bind="options: $parent.availableLanguages, value: language"></select>
    </li>
</ul>


<h4>I want to see the update here</h4>
<ul data-bind="foreach: languageSelections">
    <li data-bind="text: language"></li>
</ul>

＆＃13;

Answer 2

我最终得到了丑陋的解决方案，但它确实有效。应该有更优雅的方式。这是链接：

http://jsfiddle.net/Lypmnspz/10/

HTML

<h4>When I update it here</h4>
<ul data-bind="foreach: languages">
    <li><select data-bind="options: $parent.availableLanguages, value: $data, event: {change: $parent.updateOtherLanguage}, attr: {id: 'langopt-'+$index() }"></select></li>
</ul>


<h4>I want to see the update here</h4>
<ul data-bind="foreach: languages">
    <li data-bind="text: $data"></li>
</ul>

的Javascript

function pageModel(){
  var self = this

  // Create an observalbe array of options
  self.languages = ko.observableArray([ko.observable("English"),ko.observable("English"),ko.observable("English")]);

    // Languages
  self.availableLanguages = ko.observableArray(["English", "Spanish", "German", "Russian"]);

    self.updateOtherLanguage = function(lang, event){

       // console.log(event.target.id.split('-')[1],event.target.value)
        self.languages()[Number(event.target.id.split('-')[1])]((event.target.value))
    }


} 

ko.applyBindings(new pageModel());

在Knockout JS中有下拉列表的数组

2 个答案: