Javascript 行政长官：P self.availableDevices = ko.computed(function() { var usedQuantities = {}; // for each device id, store the used quantity ko.utils.arrayForEach(self.list(), function(item) { var device = item.device(); if (device) { usedQuantities[device.id] = 1 + (usedQuantities[device.id] || 0); } }); return ko.utils.arrayFilter(self.devices(), function(device) { var usedQuantity = usedQuantities[device.id] || 0; return device.quantity > usedQuantity; }); }); // need this to add back item's selected device to its device-options, // and to maintain original order of devices self.devicesForItem = function(item) { var availableDevices = self.availableDevices(); return ko.utils.arrayFilter(self.devices(), function(device) { return device === item.device() || availableDevices.indexOf(device) !== -1; }); }

以及相应的绑定（注意：不使用optionsValue）：

更新的JSFIDLE:

---

我对你的提琴做了一些其他的小改动，这样它就可以工作了：将extQty改为20，添加了示例设备，修复了ko.applyBindings的元素ID，注释了表单验证内容。。也许再多一点；p（还包括不同的引导css）

这是一种基于在主viewmodel对象上添加一个新的可用设备计算工具，以及一个辅助函数的方法。这并不适合所有情况，可能有一些方法可以简化这一点，但我现在已经没有精力了：P

self.availableDevices = ko.computed(function() {        
    var usedQuantities = {}; // for each device id, store the used quantity
    ko.utils.arrayForEach(self.list(), function(item) {
        var device = item.device();
        if (device) {
            usedQuantities[device.id] = 1 + (usedQuantities[device.id] || 0);
        }
    });

    return ko.utils.arrayFilter(self.devices(), function(device) {
        var usedQuantity = usedQuantities[device.id] || 0;
        return device.quantity > usedQuantity;
    });
});


// need this to add back item's selected device to its device-options,
// and to maintain original order of devices
self.devicesForItem = function(item) {        
    var availableDevices = self.availableDevices();
    return ko.utils.arrayFilter(self.devices(), function(device) {
        return device === item.device() || availableDevices.indexOf(device) !== -1;
    });
}

以及相应的绑定（注意：不使用optionsValue）：

更新的JSFIDLE:

---

---

我对你的提琴做了一些其他的小改动，这样它就可以工作了：将extQty改为20，添加了示例设备，修复了ko.applyBindings的元素ID，注释了表单验证内容。。也许再多一点；p（还包括不同的引导css）

哇，谢谢你的支持。它似乎会工作，但我有问题，整合它，我应该张贴我的代码最初，对此感到抱歉。这里是关键：这是我需要执行条件操作的代码：数据通过Ajax请求从另一个视图模型发送过来，如下所示：ExtListViewModel.devices（result.devices）；你对我上面的评论有什么问题吗？我仍然在用你上面给我的东西来整理代码时遇到问题。JSFIDLE有一大堆不起作用的东西——如果你能让它进入一种不起作用的状态，减去你正在寻找的功能，那么你就更容易理解你在试图做什么。这与HTML中的脚本标记有关，我很高兴当然这就是它基于的脚本：我怀疑你是否想做

ko.mapping.fromJS（数据，{}，self）

仅后跟

self.name=ko.observable（）等，这将覆盖您刚才映射的内容。另一方面，Quantity++哇，谢谢你所做的一切。它似乎会工作，但我有问题，整合它，我应该张贴我的代码最初，对此感到抱歉。这里是关键：这是我需要执行条件操作的代码：数据通过Ajax请求从另一个视图模型发送过来，如下所示：ExtListViewModel.devices（result.devices）；你对我上面的评论有什么问题吗？我仍然在用你上面给我的东西来整理代码时遇到问题。JSFIDLE有一大堆不起作用的东西——如果你能让它进入一种不起作用的状态，减去你正在寻找的功能，那么你就更容易理解你在试图做什么。这与HTML中的脚本标记有关，我很高兴当然这就是它基于的脚本：我怀疑你是否想做
ko.mapping.fromJS（数据，{}，self）
仅后跟
self.name=ko.observable（）等，这将覆盖您刚才映射的内容。另一方面，Quantity++棒极了！谢谢你的回答。我将它与ajax数据集成，得到一个错误：未捕获的TypeError:Object[{id:“gxp2100”，名称：“Grandstream GXP-2100”，数量：“3”，byod:“0”}，{id:“pcom331”，名称：“Polycom 331”，数量：“2”，byod:“0”}]没有方法“filter”我正在使用jQuery 1.9.1和其他一些脚本，你知道为什么会这样吗？filter应该在现代浏览器中可用，但你可以使用KO的数组函数，我将更新代码以使用它们。或者，或者你把一个字符串放进你的viewmodel，而不是一个真正的数组，这就是我发送它的方式：
success:function（result）{var-deviceListObject=result.devices；ExtListViewModel.devices（deviceListObject）；
当我用JSON.stringify发出警告时，我得到这个消息：
[{“id”：“gxp2100”，“name”：“Grandstream GXP-2100”，“数量”：“3”，“byod”：“0”}，{“id”：“pcom331”，“名称”：“Polycom 331”，“数量”：“2”，“byod”：“0”}]
它也不能与KO函数一起工作？不要发出警报，使用console.log，不使用JSON.stringify..无论如何，如果不更详细地了解您正在做什么，我无法提供更多帮助..如果您仍然有问题，也许您应该打开一个新的SO帖子，提供更多细节或演示（您可以在JSFIDLE上模拟ajax请求），因为这是一个单独的问题。谢谢你的回答。我正在将它与我的ajax数据集成，我得到一个错误：未捕获的TypeError:Object[{id:“gxp2100”，name:“Grandstream GXP-2100”，qty:“3”，byod:“0”}，{id:“pcom331”，name:“Polycom 331”，qty:“2”，byod:“0”}]没有方法“filter”我正在使用jQuery 1.9.1和其他一些脚本，你知道为什么会这样吗？filter应该在现代浏览器中可用，但你可以使用KO的数组函数，我将更新代码以使用它们。或者，或者你将字符串放入你的viewmodel中，而不是真正的数组。这就是我发送它的方式：
success:function（result）{var deviceListObject=result.devices；ExtListViewModel.devices（deviceListObject）；
当我用JSON.stringify发出警报时，我得到了这样的信息：
[{“id”：“gxp2100”，“name”：“Grandstream GXP-2100”，“qty”：“3”，“byod”：“0”}，{“id”：“pcom331”，“name”：“Polycom 331”，“qty”：“2”，“byod”：“0”}]
它也不能与KO函数一起工作？不要发出警报，使用console.log，不使用JSON.stringify..无论如何，如果不更详细地了解您正在做什么，我无法提供更多帮助..如果您仍然有问题，也许您应该打开一个新的SO帖子，提供更多细节或演示（您可以在JSFIDLE上模拟ajax请求），因为这是另一个问题
var Device = function(data) {
   var self = this;
   ko.mapping.fromJS(data, { }, self);
   // self.name added via mapping
   // self.quantity added via mapping 
   self.numberOfDevicesShown = ko.observable();
   self.showDevice = ko.computed(function(){ // use this property in the markup
       return self.numberOfDevicesShown() >= self.quantitity();
   })
};

var viewModelMapping = {
    'devices': {
        create: function(options) {
        return new Device(options.data);
    }
};

var ViewModel = function(data) {
    var self = this;
    ko.mapping.fromJS(data,viewModelMapping,self);
}

$(document).ready(function () {
    vm = new ViewModel(initialViewModelData);
    ko.applyBindings(vm);
});

<select data-bind="foreach: devices">
    <!-- ko if: showDevice -->
        <option></option>
    <!-- /ko -->
</select>

self.availableDevices = ko.computed(function() {        
    var usedQuantities = {}; // for each device id, store the used quantity
    ko.utils.arrayForEach(self.list(), function(item) {
        var device = item.device();
        if (device) {
            usedQuantities[device.id] = 1 + (usedQuantities[device.id] || 0);
        }
    });

    return ko.utils.arrayFilter(self.devices(), function(device) {
        var usedQuantity = usedQuantities[device.id] || 0;
        return device.quantity > usedQuantity;
    });
});


// need this to add back item's selected device to its device-options,
// and to maintain original order of devices
self.devicesForItem = function(item) {        
    var availableDevices = self.availableDevices();
    return ko.utils.arrayFilter(self.devices(), function(device) {
        return device === item.device() || availableDevices.indexOf(device) !== -1;
    });
}

<select style="width:100px;" data-bind="options: $root.devicesForItem($data), optionsText: 'name', value: device"></select>