jquery - 设置模板中下拉列表的 selectedValue (加载时)

Question

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

据我所知(参见 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();
    }
});

这是相应的 View :

<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>

以下是上面代码中我需要的内容:

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

第二个要求我有 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);   
        }  
    }
});

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

对于添加/删除行，您可以添加针对 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 绑定(bind)，以绑定(bind) id。然后，我将初始数据设置为包含两个旅行者及其 ID。您可以将其切换为帐号或任何合适的内容。