Question

我在更改选择值时尝试更新文本框。

现在，我知道这很简单，但我并不想通过简单的数据来更新文本框。

到目前为止，我能做些什么：

抓住变更事件
从“选择”下拉列表中获取ID

这是我想做的事情：

使用选定的ID从viewmodel内的对象数组中返回属性值。但是，ID与数组索引不匹配（即所选ID可能是＆＃34; 43＆＃34;但索引为0）。

发布我的Knockout代码没什么意义，因为它相当基本，所以我会发布我的VM结构。

ViewModel
--> Property1
--> Property2
--> Array
    --> Object[0]
        --> "Property to match with the selected ID"
        --> "Property that I want to return"
    --> Object[1]

不确定这是多么有意义，希望它有所成就。

可以提供任何其他信息。

谢谢！

修改

VM

var PurchaseOrderViewModel = function (data) {
    var self = this;

    self.UpdateCurrency = function (data, event) {
        //
    }
    self.UpdateSupplierContactDetails = function (data, event) {
        //
    }

    ko.mapping.fromJS(data, {}, self);
}

$(document).ready(function () {
    var viewModel = new PurchaseOrderViewModel(@Html.Raw(jsonString));

    ko.applyBindings(viewModel);
});

编辑＃2

管理以获得有效的解决方案，以防其他人在此处遇到问题是我如何解决它。

var contact = ko.unwrap(ko.utils.arrayFirst(self.AllSupplierContacts(),
    function (item) {
        return ko.unwrap(item.Id) === newID;
    }).BusinessTelephoneNumber);

Answer 1

这个答案有两个部分：我认为你正在寻找的代码（1），以及我认为你应该写的代码（2）。

<强> 1。查找与ID匹配的项目

＆＃13;

ko.applyBindings(new function() {
  
  this.ids = ["A", "B", "C", "D"];
  this.selectedId = ko.observable();
  
  this.items = [
    { key: "A", value: 1 },
    { key: "B", value: 2 },
    { key: "C", value: 3 },
  ];
  this.selectedValue = ko.pureComputed(function() {
    var selectedId = this.selectedId();
    
    // Find the object in items of which the property
    // `key` matches the `selectedId` and return it
    var match = this.items.find(function(item) {
      return item.key === selectedId;
    });
    
    return match ? match.value : "No item found";
  }, this);
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options: ids, value: selectedId"></select>

<div>
  Your selected value: <strong data-bind="text: selectedValue"></strong>
</div>

＆＃13;

<强> 2。将实际元素绑定到选择：

Knockout options绑定开箱即用。您可能不需要单独存储ids和items。通过告诉绑定应该在下拉列表中呈现哪个属性（optionsText），以及将哪个属性存储为值（optionsValue），您需要更少的代码来执行相同的操作：

＆＃13;

ko.applyBindings(new function() {
  
  this.items = [
    { key: "A", value: 1 },
    { key: "B", value: 2 },
    { key: "C", value: 3 },
    { key: "D", value: 4 }
  ];
  
  this.selectedValue = ko.observable();
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options: items,
                   optionsText: 'key',
                   optionsValue: 'value',
                   value: selectedValue"></select>

<div>
  Your selected value: <strong data-bind="text: selectedValue"></strong>
</div>

＆＃13;

Knockout.js - 下拉列表更改后更新文本框

1 个答案: