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 に答える