Question

我在下拉列表中遇到一些问题，我需要将初始值传递给视图模型，因此，下拉列表将填充已经选择的值。

据我所知（见this fiddle）：

var additionalTravellersDetails = [
    { id: 1, firstName: "George", middleName: "", lastName: "Washington ", AcNum: "12345678" }, 
    { id: 2, firstName: "Abraham ", middleName: "", lastName: "Lincoln", AcNum: "23758383" },
    // etc
];

function Traveller(id, AcNum) {
    this.id = ko.observable(id);
    this.categoryId = ko.observable();
}

Traveller.prototype.getUniqueCategories = function () {
    var thisCategoryId = parseInt(this.categoryId(), 10);
    return ko.utils.arrayFilter(additionalTravellersDetails, function (additionalTravellersDetails) {
        return (additionalTravellersDetails.id === thisCategoryId) || !viewModel.usedCategoryIndex()[additionalTravellersDetails.id];
    });
}

var viewModel = {
    TravRows: ko.observableArray([]),
    addTravRow: function () {
        this.TravRows.push(new Traveller());
    },
    removeTravRow: function (Traveller) {
        this.TravRows.remove(Traveller);
    },

    noOfTrav: ko.observableArray(['1', '2', '3', '4', '5', '6', '7', '8', '9']),
    SelectedNo: ko.observable('1')
};

viewModel.usedCategoryIndex = ko.dependentObservable(function () {
    var result = {};
    ko.utils.arrayForEach(this.TravRows(), function (Traveller) {
        var cat = Traveller.categoryId();
        if (cat) {
            result[cat] = 1;
        }
    });
    return result;
}, viewModel);

viewModel.TravRows.push(new Traveller());

ko.applyBindings(viewModel);

// On Num of Trav Select index change
$("#nrTravelers").change(function () {
    var len = viewModel.noOfTrav().length;
    for (var i = 0; i < len; i++) {
        viewModel.removeTravRow(viewModel.TravRows()[0]);
    }
    for (var i = 0; i < $(this).val(); i++) {
        viewModel.addTravRow();
    }
});

这是相应的观点：

<p>Number of travellers:
    <select id="nrTravelers" data-bind="options: noOfTrav,  selectedOptions: SelectedNo"></select>
</p>
<table data-bind="template: {name:'AdditionalTravelersTemplate', foreach: TravRows}"></table>
<script id="AdditionalTravelersTemplate" type="text/html">
    <tr>
        <th>Traveler<span>1</span></th> //TODO: replace 1 with the auto num
    </tr>
    <tr>
        <td>
            <select data-bind="options: getUniqueCategories(), 
                               optionsText: function(item) {
                                   return item.lastName+ ' , ' + item.firstName+ ' - '+ item.AcNum }, 
                               optionsValue: 'id', 
                               optionsCaption: 'choose one...', 
                               value: categoryId"></select > 
        </td>
    </tr >
</script>

以上是我在上述代码中需要的内容：

我想预先填充所有已选择值的下拉列表
当列表中不再包含旅行者时，我想在下拉列表中显示一些文字
我想在每个下拉列表的“Traveler”文本之后添加一个数字

我有solved的第二个要求，还有两个要求。

PS。我已经对第一个要求进行了硬编码，请告诉我方法是否合适？

有任何建议/想法吗？

Answer 1

以下是一些想法：http://jsfiddle.net/rniemeyer/P6aDk/

对于索引，您可以使用jQuery模板中的{{each}}或者仍然可以获得KO foreach的好处的简单方法是创建对observableArray的手动订阅并更新/创建属性保持这个位置。这就像：

viewModel.TravRows.subscribe(function(currentValue) {
    for (var i = 0, j = currentValue.length; i < j; i++) {
       var row = currentValue[i];
        if (!row.position) {
           row.position = ko.observable(i+1);  
        } else {
           row.position(i+1);   
        }  
    }
});

现在，每一行都有一个可以绑定的“位置”可观察，并且随着数组的变化它们会保持更新。

对于添加/删除行，您可以针对SelectedNo observable添加订阅，当它发生更改时，您可以协调实际的行数。像：

viewModel.SelectedNo.subscribe(function(newValue) {
    var actualLen = viewModel.TravRows().length,
        expectedLen = parseInt(newValue, 10);

    if (actualLen < expectedLen) {
        for (var i = actualLen; i < expectedLen; i++) {
           viewModel.addTravRow();  
        }
    } else {
        for (var i = actualLen; i > expectedLen; i--) {
            viewModel.removeTravRow(viewModel.TravRows()[i]);
        }
    }
});

为了设置现有数据，我更改了每行下拉列表上的value绑定以绑定id。然后，我将初始数据设置为包含两个带有ID的旅行者。您可以将其切换为帐号或任何合适的帐号。

在模板中设置下拉列表的selectedValue（加载时）

1 个答案: