Question

我有来自另一个视图模型的数据，我在下拉菜单中显示它。我需要来自其他视图模型的每个选项每行唯一，因此一旦用户将项添加到列表中，该选项就不再可用。

    window.usrViewModel = 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.extData = ko.observableArray();    
    extData = ExtListViewModel.list();


    self.edit = function (item) {
        if($('#usrForm').valid()) {
        self.selectedItem(item);
        }
    };

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

    self.add = function () {
        if($('#usrForm').valid()) {
        var newItem = new Users();
        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());
                    }

            }
            $('.error').hide();

    };
    self.save = function () {

        self.selectedItem(null);

    };

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

    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(usrViewModel, document.getElementById('usrForm'));

function Users(fname, lname, email, phone, access, usrExtVal){
    this.fname = ko.observable(fname);
    this.lname = ko.observable(lname);
    this.email = ko.observable(email);
    this.phone = ko.observable(phone);
    this.access = ko.observable(access);
    this.usrExtVal = ko.observableArray(usrExtVal);   
}

<form id="usrForm">
<h2>Users</h2>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Phone Number</th>
            <th>Access</th>
            <th>Extension</th>
            <th style="width: 100px; text-align:right;" />
        </tr>
    </thead>
   <tbody data-bind=" template:{name:templateToUse, foreach: pagedList }"></tbody>
</table>
<p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add" href="#" title="edit"><i class="icon-plus"></i> Add Users</a></p>
<div class="pagination pull-left">
    <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="usrItems" type="text/html">
   <tr>
        <td data-bind="text: fname"></td>
        <td data-bind="text: lname"></td>
        <td data-bind="text: email"></td>
        <td data-bind="text: phone"></td>
        <td data-bind="text: access"></td>
        <td data-bind="text: usrExtVal"></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="editUsrs" type="text/html">
   <tr>
        <td><input data-errorposition="b" class="required" name="fname" data-bind="value: fname" /></td>
        <td><input data-errorposition="b" class="required" name="lname" data-bind="value: lname" /></td>
        <td><input data-errorposition="b" class="required" name="email" data-bind="value: email" /></td>
        <td><input data-errorposition="b" class="required" name="phone" data-bind="value: phone" /></td>
        <td><select data-bind="value: access"><option>Employee</option><option>Administrator</option><option>PBX Admin</option><option>Billing</option></select></td>
        <td><select data-bind="options: $root.extOptions, optionsText: 'extension', value: usrExtVal"></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>

Answer 1

我不确定这是否是你要找的，但这里有一个小提琴，根据已经使用的值计算可用值：

http://jsfiddle.net/jearles/QTUqD/11/

-

HTML

<select data-bind="options: $root.availableExtData, optionsText: 'extension', value: usrExtVal"></select>

JS

self.availableExtData = ko.computed(function() {
    var inUse = [];
    if (!self.selectedItem()) return inUse;

    ko.utils.arrayForEach(self.list(), function(item) {
        if (inUse.indexOf(item.usrExtVal().extension) == -1 && self.selectedItem() != item) inUse.push(item.usrExtVal().extension);
    });

    return ko.utils.arrayFilter(self.extData(), function(item) {
        return inUse.indexOf(item.extension) == -1;
    });
});

-

代码确保在编辑选择项时，它的当前值可用。此外，一旦所有可用值都有一行，我也不会显示添加按钮。

Answer 2

使用可用选项创建一个计算的observable，从完整列表中过滤掉（ extData ）已经分配给项目的那些 - 除了所选项目使用的那个 - 然后将选择字段的选项绑定到计算的选项而不是完整列表。

选项单一使用来自json的值 - Knockout JS

2 个答案: