Javascript 删除js网格交换输入字段（如果数据存在）

我有一个可编辑的网格，在用户使用ajax登录后，我在其中填充数据

我正在用设备列表和装运信息填充它。在设备列表json中，我有一个布尔值“byod”，如果所选行将此数据设置为“0”的设备，我希望将“MAC Address”文本字段与“Ship to”下拉列表交换

fiddle在这里，代码如下：

<form id="extMngForm">

    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Extension</th>
                <th>Name</th>
                <th>Email</th>
                <th>Pin</th>
                <th>Device</th>
                <th>MAC Address</th>
                <th>Ship To</th>
                <th style="width: 100px; text-align:right;"></th>
            </tr>
        </thead>
       <tbody data-bind=" template:{name:templateToUse, foreach: pagedList }"></tbody>
    </table>

    <p class="pull-right addExt"><a class="btn btn-primary" data-bind="click: $root.add" href="#" title="edit"><i class="icon-plus"></i> Add Extension</a></p>

    <div class="pagination pull-left" data-bind='visible: pagedList().length > 0'>
        <ul><li data-bind="css: { disabled: pageIndex() === 0 }"><a href="#" data-bind="click: previousPage">Previous</a></li></ul>
        <ul data-bind="foreach: allPages">
            <li data-bind="css: { active: $data.pageNumber === ($root.pageIndex() + 1) }"><a href="#" data-bind="text: $data.pageNumber, click: function() { $root.moveToPage($data.pageNumber-1); }"></a></li>
        </ul>
        <ul><li data-bind="css: { disabled: pageIndex() === maxPageIndex() }"><a href="#" data-bind="click: nextPage">Next</a></li></ul>
    </div>

    <br clear="all" />
    <script id="extItems" type="text/html">
       <tr>
            <td style="width:20px;" data-bind="text: extension"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: email"></td>
            <td style="width:20px;" data-bind="text: vmpin"></td>
            <td data-bind="text: device.asObject && device.asObject() && device.asObject().name"></td>
            <td data-bind="text: macAddress"></td>
            <td data-bind="text: shipTo"></td>
            <td class="buttons">
                <a class="btn" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-edit"></i></a>
                <a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-remove"></i></a>
            </td>
        </tr>
    </script>

    <script id="editExts" type="text/html">
        <tr>
            <td style="width:20px;"><input style="width:65px;min-width: 65px;" data-errorposition="b" class="required" name="extension" data-bind="value: extension" /></td>
            <td><input data-errorposition="b" class="required" name="name" data-bind="value: name" /></td>
            <td><input data-errorposition="b" class="required" name="email" data-bind="value: email" /></td>
            <td style="width:20px;"><input style="width:65px;min-width: 65px;" data-errorposition="b" class="required" name="vmpin" data-bind="value: vmpin" /></td>
            <td>

            <select data-bind="options: $root.devicesForItem($data), optionsText: 'name', optionsValue: 'id', value: device, valueAsObject: 'asObject'"></select>

            </td>
            <td><input name="macAddress" data-bind="value: macAddress" /></td>
            <td><select style="width:100px;" data-bind="options: $root.addressList, optionsText: 'locationName', optionsValue: 'locationName', value: shipTo"></select></td>
            <td class="buttons">
                <a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
                <a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-remove"></i></a>
            </td>
        </tr>
    </script>
</form>

延伸
名称
电子邮件
别针
装置
MAC地址
运船到

---

window.ExtListViewModel=新函数（）{
var self=这个；
window.viewModel=self；
self.list=ko.observearray（）；
self.pageSize=ko.可观察（10）；
self.pageIndex=ko.可观察（0）；
self.selectedItem=ko.observable（）；
self.extQty=ko.可观察（20）；
self.devices=ko.observearray（[{“id”：“gxp2100”，“名称”：“Grandstream GXP-2100”，“数量”：“2”，“byod”：“1”），{“id”：“gxp2100”，“名称”：“Grandstream GXP-2100（byod）”，“数量”：“1”，“byod”：“0”；{“id”：“pcom331”，“名称”：“2”，“byod”：“0”；{“id”：“pcom331”，“名称”：“Polycom 331”）；
self.addressList=ko.observearray（['addressList']）；
self.availableDevices=ko.computed（函数（）{
var usedquanties={}；
self.list（）.forEach（函数（项）{
var device=item.device（）；
如果（设备）{
使用数量[device.id]=1+（使用数量[device.id]| | 0）；
}
});
返回self.devices（）.filter（函数（设备）{
var usedQuantity=usedquanties[device.id]| | 0；
返回设备数量>使用数量；
});
});
self.devicesForItem=函数（项）{
var availableDevices=self.availableDevices（）；
返回self.devices（）.filter（函数（设备）{
返回设备===item.device（）| | availableDevices.indexOf（设备）！=-1；
});
}
self.edit=功能（项目）{
self.selectedItem（项目）；
};
self.cancel=函数（）{
self.selectedItem（空）；
};
self.add=函数（）{
var newItem=newextension（）；
self.list.push（newItem）；
self.selectedItem（新建项）；
self.moveToPage（self.maxPageIndex（））；
};
self.remove=功能（项目）{
如果（确认（'您确定要删除此项目吗？'））{
self.list.remove（项目）；
if（self.pageIndex（）>self.maxPageIndex（））{
self.moveToPage（self.maxPageIndex（））；
}
}
};
self.save=函数（）{
self.selectedItem（空）；
};
self.templateouse=函数（项）{
返回self.selectedItem（）==item？'editExts'：'extItems'；
};
self.pagedList=ko.dependenttobservable（函数（）{
var size=self.pageSize（）；
var start=self.pageIndex（）*大小；
返回self.list.slice（开始，开始+大小）；
});
self.maxPageIndex=ko.dependentObservable（函数（）{
返回Math.ceil（self.list（）.length/self.pageSize（））-1；
});
self.previousPage=函数（）{
if（self.pageIndex（）>0）{
self.pageIndex（self.pageIndex（）-1）；
}
};
self.nextPage=函数（）{
if（self.pageIndex（）对于（i=0；i首先，就像我在最近的另一篇文章中向您展示的那样，如果您希望值是对象本身（然后您不需要该值作为对象内容），请不要为您的选择使用
options value
绑定。因此：

首先，就像我在你最近的另一篇文章中向你展示的那样，如果你想让值成为对象本身（然后你就不需要这个值作为对象的东西），那么不要在选择中使用
选项value
绑定。因此：

并在绑定中使用此计算，例如
或
真棒的人，再次感谢你。我很难将我的大脑围绕在mvvm的东西上。在看到这一点后，虽然我不知道我怎么会错过它。哦，valueAsObject是试图向数据库发送不同的信息。我需要从发送的字符串中获取“id”选择的“名称”。有什么想法吗？您是否通过常规表单submit将数据发送到DB？然后您可以从viewmodel中获取id，没有？我的意思是，我不需要获取
的值，我的意思是如何做到这一点？这就是我的submit ajax看起来的样子：
$。ajax({url:'/activate/create'，type:'POST'，data:ko.toJSON（{ext:ExtListViewModel.list（），}），contentType:'application/json'}）；
那么它已经为每个项目发送了所选设备的id。。有什么问题吗？真棒的人，再次感谢你。我的大脑在包装上遇到了问题
window.ExtListViewModel = new function () {
    var self = this;
    window.viewModel = self;

    self.list = ko.observableArray();
    self.pageSize = ko.observable(10);
    self.pageIndex = ko.observable(0);
    self.selectedItem = ko.observable();
    self.extQty = ko.observable(20);

    self.devices = ko.observableArray([{"id":"gxp2100","name":"Grandstream GXP-2100","qty":"2","byod":"1"}, {"id":"gxp2100","name":"Grandstream GXP-2100 (BYOD)","qty":"1","byod":"0"}, {"id":"pcom331","name":"Polycom 331","qty":"2","byod":"0"}, {"id":"pcom331","name":"Polycom 331 (BYOD)","qty":"1","byod":"1"}]);
    self.addressList = ko.observableArray(['addressList']);
    self.availableDevices = ko.computed(function() {        
        var usedQuantities = {};
        self.list().forEach(function(item) {
            var device = item.device();
            if (device) {
                usedQuantities[device.id] = 1 + (usedQuantities[device.id] || 0);
            }
        });

        return self.devices().filter(function(device) {
            var usedQuantity = usedQuantities[device.id] || 0;
            return device.qty > usedQuantity;
        });
    });
    self.devicesForItem = function(item) {        
        var availableDevices = self.availableDevices();
        return self.devices().filter(function(device) {
            return device === item.device() || availableDevices.indexOf(device) !== -1;
        });
    }

    self.edit = function (item) {
            self.selectedItem(item);
    };

    self.cancel = function () {
        self.selectedItem(null);
    };

    self.add = function () {
            var newItem = new Extension();
            self.list.push(newItem);
            self.selectedItem(newItem);
            self.moveToPage(self.maxPageIndex());
    };
    self.remove = function (item) {

            if (confirm('Are you sure you wish to delete this item?')) {

                    self.list.remove(item);
                    if (self.pageIndex() > self.maxPageIndex()) {
                        self.moveToPage(self.maxPageIndex());
                    }

            }
    };
    self.save = function () {
            self.selectedItem(null);
    };

    self.templateToUse = function (item) {
        return self.selectedItem() === item ? 'editExts' : 'extItems';
    };

    self.pagedList = ko.dependentObservable(function () {
        var size = self.pageSize();
        var start = self.pageIndex() * size;
        return self.list.slice(start, start + size);
    });
    self.maxPageIndex = ko.dependentObservable(function () {
        return Math.ceil(self.list().length / self.pageSize()) - 1;
    });
    self.previousPage = function () {
        if (self.pageIndex() > 0) {
            self.pageIndex(self.pageIndex() - 1);
        }
    };
    self.nextPage = function () {
        if (self.pageIndex() < self.maxPageIndex()) {
            self.pageIndex(self.pageIndex() + 1);
        }
    };
    self.allPages = ko.dependentObservable(function () {
        var pages = [];
        for (i = 0; i <= self.maxPageIndex() ; i++) {
            pages.push({ pageNumber: (i + 1) });
        }
        return pages;
    });
    self.moveToPage = function (index) {
        self.pageIndex(index);
    };


};

ko.applyBindings(ExtListViewModel, document.getElementById('extMngForm'));

function Extension(extension, name, email, vmpin, device, macAddress, shipTo){
    this.extension = ko.observable(extension);
    this.name = ko.observable(name);
    this.email = ko.observable(email);
    this.vmpin = ko.observable(vmpin);
    this.device = ko.observable(device);
    this.macAddress = ko.observable(macAddress);
    this.shipTo = ko.observable(shipTo);
};
ExtListViewModel.addressList = [{"shipping_address_street":"555 Lane","shipping_address_state":"TX","shipping_address_city":"Dallas","shipping_address_postalcode":"75000","locationName":"Preset"}, {"shipping_address_street":"555 Lane","shipping_address_state":"TX","shipping_address_city":"Dallas","shipping_address_postalcode":"75000","locationName":"Home"}];

//Shows device name not value (knockout extension)
ko.bindingHandlers.valueAsObject = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var value = allBindingsAccessor().value,
            prop = valueAccessor() || 'asObject';

        //add an "asObject" sub-observable to the observable bound against "value"
        if (ko.isObservable(value) && !value[prop]) {
              value[prop] = ko.observable();
        }
    },
    //whenever the value or options are updated, populated the "asObject" observable
    update: function(element, valueAccessor, allBindingsAccessor) {
        var prop = valueAccessor(),
            all = allBindingsAccessor(),
            options = ko.utils.unwrapObservable(all.options),
            value = all.value,
            key = ko.utils.unwrapObservable(value),
            keyProp = all.optionsValue,
            //loop through the options, find a match based on the current "value"
            match = ko.utils.arrayFirst(options, function(option) {
               return option[keyProp] === key;
            });

        //set the "asObject" observable to our match
        value[prop](match);
    }
};

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

this.showMac = ko.computed(function() {
        if (self.device())
            return self.device().byod !== '0';
        return true;
});