淘汰赛：在下拉选择中填充可观察属性答案

【问题标题】：Knockout : populate observable property on a drop-down selection淘汰赛：在下拉选择中填充可观察属性
【发布时间】：2017-09-28 23:27:43
【问题描述】：

您好，请您帮我解决以下问题：

我有模特：

// Form model
function Form(form, title, max) {
  this.Form = ko.observable(form);
  this.Title = ko.observable(title);
  this.Max = ko.observable(max);
}

“表单”属性在此数组中的视图上填充的位置：

var forms = ['T-01', 'T-02', 'T-03'];

像这样：

<select data-bind="options: forms,
        value: Form,
        optionsCaption: 'Select...'">
</select>

问题：如何根据选定的表单填充“标题”属性，我还需要输出 JSON 应该如下所示：

"Forms": [
  {
   "Form": "T-01",
   "Title": "",
   "MAX": 0
  }
  ...

因为当我尝试像这样存储我的数据时：

var forms = [
  { name: 'T-01', title: 'Test 1' },
  { name: 'T-02', title: 'Test 2' },
  { name: 'T-02', title: 'Test 3' }
]

在我看来，我正在这样做：

<select data-bind="options: forms, 
                   optionsText: 'name', 
                   value: Form, optionsCaption: 'Select...'"></select>

我的输出 JSON 如下所示：

 "Forms": [
  {
   "Form": {
    "name": "T-01",
    "title": "Test 1"
   },
   "Title": "",
   "MAX": 0
  }

对不起，解释太长了，我真的不知道如何描述。谢谢...

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以在 title 属性上使用计算出的 observable。

    function Form(form, title, max) {
    var self = this;
    self.Form = ko.observable(form);
    self.Max = ko.observable(max);
    self.forms = ['T-01', 'T-02', 'T-03'];
    self.Title = ko.computed(function() {
       if(self.Form() === "T-01")
       {
         return 'Test-1'
       }
       else if(self.Form() === "T-02")
       {
         return 'Test-2'
       }
       else {
        return 'Test-3'
       }
  });    
}

这是您的示例的jsfiddle。

【讨论】：