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

Question

大家下午好。

我已经尝试搜索它，但要么我搜索的内容有误，要么还没有答案。我正在尝试用下拉列表在淘汰赛中制作一个列表，当这些下拉值发生变化时，列表中的相应值需要更新。这是我目前的 "vision"，它不起作用。

这是来自 Fiddle 的代码：

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());

<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>

任何人都可以提出建议吗？谢谢。

Answer 1

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

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());

Answer 2

也许您需要另一个数据模型 - 我们称之为 LanguageSelection:

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 );

<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>

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

Array with dropdowns in Knockout JS

javascript

jquery

knockout.js