9

我有以下型号：

var allCategories = [{
    id: 1,
    name: 'Red'},
{
    id: 5,
    name: 'Blue'}];

function model() {
    self = this;
    self.name = ko.observable("");
    self.categoryId = ko.observable(-1);
    self.categoryName = ko.computed(function() {
        if (self.categoryId() == -1) return "";
        return getCategoryNameById(self.categoryId()).name;
    });
}

function getCategoryNameById(id) {
    return _.find(allCategories, function(cat) {
        return cat.id == id;
    });
}

我想提供一个下拉列表来选择类别，但我不知道如何绑定它。也许我对我的模型使用了错误的方法，但这很可能是我从服务器获取数据的方式，所以我试图将我的 JS 包装在它周围。

我试过这样的事情：

<select data-bind="options: categories, optionsText: 'name', value: 'id', optionsCaption: 'Categorie...'"></select>

但我不知道如何将下拉值连接到模型categoryId。

这是一个用于 name 属性的工作绑定的小提琴。

4

2 回答 2

22

对于您的列表框，您需要指定：options、optionsText、optionsValue和value。 value（这是当前选择的值）应该指向你的model.categoryId(). 并且optionsValue是获取列表值的属性名称：

<select data-bind="options: categories, optionsText: 'name', optionsValue: 'id', value: $root.model.categoryId(), optionsCaption: 'Categorie...'"></select>

就是这样。和工作小提琴：http: //jsfiddle.net/Y7Nrc/

于 2012-11-27T16:01:46.940 回答
11

根据 Max Schmelevs 的回答，这是正确的，当您从下拉列表中更改项目时，此功能不会更改 JSON 对象。

所以这是我对他的代码的更正：

HTML 代码：

<div id="container">
  <!-- Here I've added valueUpdate on keydown -->
  <input data-bind="value: model.name, valueUpdate:'afterkeydown'" />
  <!-- NOTE: Here you should call value like $root.model.categoryId -->
  <select data-bind="options: categories, optionsText: 'name', optionsValue: 'id', value: $root.model.categoryId, optionsCaption: 'Categorie...'"></select>
  <span data-bind="text: ko.toJSON($data.model)"></span>
</div>

Javascript代码：

var allCategories = [
    {id: 1, name: 'Red'},
    {id: 5, name: 'Blue'}];

function model() {
    self = this;
    self.name = ko.observable("");
    self.categoryId = ko.observable(1);
    self.categoryName = ko.computed(function() {
    //NOTE: Here we should check if categoryId() is defined or not
    if (!self.categoryId()) return "";
        return getCategoryNameById(self.categoryId()).name;
    });
}

function getCategoryNameById(id) {
    return _.find(allCategories, function(cat) {
        return cat.id == id;
    });
}

var viewModel = {};
viewModel.model = new model();
viewModel.categories = allCategories;
ko.applyBindings(viewModel, document.getElementById('container'));

！！！重要的！！！

如果这种方法回答了您的问题，请选择 Max Shmelev 的正确答案，而不是我的，因为我刚刚在他的代码中添加了一些注释。

于 2012-11-27T17:00:54.030 回答