Knockout.js

Question

所以我有 2 个视图模型，一个包含我使用的数组，该数组将 dataList 中的每个数据节点绑定到表单，另一个用作每个数据节点的模型。我正在尝试使用第二个视图模型中的数据更新第一个视图模型中的数组：

HTML:

<div data-bind="foreach:mainArray">
    <select data-bind="options: $root.ourTypes, optionsValue: 'ID', optionsText: 'Name', value: $data.OurTypeId"></select>
</div>

JavaScript:

var dataList = [        
    { OurTypeId: 4 }, // there are other values here... 
    { OurTypeId: 2 }, // and here...
    { OurTypeId: 3 }  // and here...
];
var ourTypes = [
    { ID:"1", Name:"None", Limit:0 },
    { ID:"2", Name:"Fruits", Limit:5 },
    { ID:"3", Name:"Vegetables", Limit:5 },
    { ID:"4", Name:"Meats", Limit:2 }
];
var myViewModel = new MyViewModel(dataList);
ko.applyBindings(myViewModel);

function MyViewModel(dataList) {
    var self = this;
    self.ourTypes = ourTypes;
    self.mainArray = ko.observableArray([]);

    if (dataList.length > 0) {
        for (var i=0; i<dataList.length; i++) {
            var myDataViewModel = new MyDataViewModel(dataList[i]);
            //alert(myDataViewModel.OurType);
            self.mainArray.push(myDataViewModel);
        } 
    }
}

function MyDataViewModel(vm) {
    var self = this;
    if (vm != null) {                     
        var myType = "";
        for (var i=0; i<ourTypes.length; i++) {
            if (ourTypes[i].ID == vm.OurTypeId)
                myType = ourTypes[i].Name;
        }
        self.OurTypeId = ko.observable(vm.OurTypeId);
        self.OurType = myType;
   } else {
       self.OurTypeId = 0;    
       self.OurType = "";    
   }
   self.OurTypeId.subscribe(function(newValue) {
       var updatedItem = 0;
       var newName = "";
       for (var i=0; i<ourTypes.length; i++) {
          if (ourTypes[i].ID == newValue) {
            self.OurType = ourTypes[i].Name;
            // alert(ourTypes[i].Name);
             updatedItem = i;
          }
       }
   //  I want to do something like this to update "OurType" in mainArray...
   //  var theList = MyViewModel.mainArray();
   //  theList[updatedItem].OurType = self.OurType;
   //  MyViewModel.mainArray(theList);
   });
}

这实际上是代码的精简版，只关注"ourTypes"，我的fiddle多了一点。我使用下拉列表中的 ID 来指示模型中的更改，但随后我必须手动更新类型的实际名称（您将看到当 ID 在我的 fiddle 中更新时名称如何不更新)，所以我尝试在 .subscribe() 函数中执行此操作，但似乎没有任何效果。有什么想法吗？

Fiddle: http://jsfiddle.net/navyjax2/ks6nbzp7/

Answer 1

由于 OurType 的名称应该在您更改 ID 时自动更改，这对 computed observable:

来说是个好工作

self.OurType = ko.computed(function() {

    return ko.utils.arrayFirst(ourTypes, function(type) {
        return type.ID == self.OurTypeId();
    }).Name;

});

当一个计算的可观察对象运行时，它会记录访问的所有其他可观察对象——在我们这里的例子中，就是 self.OurTypeId()。这就是所谓的依赖。每当依赖项发生变化时，计算结果将再次自动运行。

在这里，我们使用 Knockout 辅助函数 ko.utils.arrayFirst 迭代 ourTypes 和 return 其中 ID 与用户拥有的 self.OurTypeId() 相匹配的第一个元素选择。然后我们 return 那个 ourType 元素的 .Name。

JSFiddle

请注意，您的 if (vm != null) else 子句可能存在问题：您设置的值不可观察。

self.OurTypeId = 0;

这意味着 MyDataViewModels 其中 vm 是 null 将被破坏 - Knockout 会将 <select> 绑定到一个普通的，不可观察的“0”并且再也不会更新了

另外，有一次你让 self.SlotPosition 成为一个 observable，另一次你让它成为一个 observableArray。

最好将属性初始化为可观察一次，并且只更新它们的值：

function MyDataViewModel(vm) {
    var self = this;

    this.SlotPosition = ko.observable();
    this.OurTypeId    = ko.observable();

    if (vm) {
        this.SlotPosition(vm.SlotPosition);
        this.OurTypeId(vm.OurTypeId);
    }

    this.OurType = ko.computed(function() {

        if (!self.OurTypeId()) {
            return;
        }

        return ko.utils.arrayFirst(ourTypes, function(type) {
            return type.ID == self.OurTypeId();
        }).Name;

    });
}

Knockout.js - 使用第二个视图模型中的值更新父视图模型中的数组

Knockout.js - Updating an array in parent view model, with value in second view model

javascript

arrays

mvvm

viewmodel