1

ビューモデルを選択リストにバインドすると正しい行数が表示されるという奇妙な状況がありますが、表示されるデータは空です。オプション要素の数は正しいが、それぞれに空の値とテキストがあります。モデルの下は正しいです。値の選択は正常に機能し、保存すると、ビュー モデル コードが正しい値を保存します。何も見えないだけです。ただし、関数を使用したバインドは機能します。たとえば、これは正しく表示されます:

<select data-bind="options: promotionLevels, 
                   optionsText: function(item) {
                       return item().description();
                   }, 
                   optionsValue: function(item) {
                       return item().id();
                   },
                   value: promotionLevel, 
                   optionsCaption: 'Choose...'"></select>

これはしませんが：

<select data-bind="options: promotionLevels, 
                   optionsText: 'description',  
                   optionsValue: 'id', 
                   value: promotionLevel, 
                   optionsCaption: 'Choose...'"></select>

私はノックアウトに比較的慣れていないので、問題が何であるかを知りたい.

ありがとう

[編集] サーバーによって生成されたデータは次のとおりです。

"promotionLevels":[{"id":"f28391a0-8995-45a4-a360-1dd1ae38861b","description":"Beta"},{"id":"6fb6ad46-fff4-4da8-98ef-4ff469406a6c","description":"Development"},{"id":"f16d044a-4ea6-4001-844e-c8dad6227c04","description":"Production"},{"id":"1da6ac1f-7d31-ba64-fbce-c8623af6464f","description":"QA"},{"id":"bc34a34a-0c89-4215-a001-1ea40433b8a9","description":"Test"}]

ko 経由でバインドされたデータをダンプすると、昇格レベルは次のようになります。

"promotionLevels": [
    {
      "id": "f28391a0-8995-45a4-a360-1dd1ae38861b",
      "description": "Beta",
      "__ko_mapping__": {
        "ignore": [],
        "include": [
          "_destroy"
        ],
        "copy": [],
        "mappedProperties": {
          "id": true,
          "description": true
        }
      }
    },
    {
      "id": "6fb6ad46-fff4-4da8-98ef-4ff469406a6c",
      "description": "Development",
      ...

これを jsfiddle しようとしましたが、依存関係が大きすぎます。

[編集2]

ページコードは次のとおりです。

    var mapping = {
        promotionLevel: {
            create: function(ctx) {
                return ko.observable(new Foo.ReferenceDataModel(ctx));
            }
        },
        ...
    };

    var viewModel = @Html.Knockout().ToViewModel(this.Model, @<text>mapping</text>);
    ko.applyBindings(viewModel, $("#endpointEditor")[0]);

ビュー モデル コード:

Foo.ReferenceDataModel = $.inherit(
Foo.ViewModelBase,
{
    __constructor: function(options) {
        this.__base();

        if (options && options.data) {
            ko.mapping.fromJS(options.data, options.mapping || { }, this);
        } else {
            this.id = ko.observable($.generateId());
            this.description = ko.observable();
        }

        this.save = function(data, e) {
            var self = this;
            var form = $(e.target).parents("form");
            $.validator.unobtrusive.parse(form);
            if (!$(form).valid()) {
                return;
            }

            if (options.callback) {
                options.callback(self);
            }
        };
    }
});

これは私が継承したアプリケーションであり、モデルの複雑なセットなどがあります。基本ビュー モデルは、デフォルトのエラー処理を追加するだけです。

4

1 に答える 1

1

あなたの問題は、このコードを実行したときにko.observableオブジェクトがあることです:promotionLevels

var mapping = {
        promotionLevel: {
            create: function(ctx) {
                return ko.observable(new Foo.ReferenceDataModel(ctx));
            }
        },
        ...
    };

オプション バインディングは、のプロパティ名または関数のみをサポートしますoptionsText。

あなたの場合、アイテムは配列内の監視可能なオブジェクトであるため、単純なプロパティ名（「説明」など）だけでは機能しないため、 a 関数を使用する必要がありますoptionsText: function(item) { return item().description(); },

ただし、コレクションに監視可能なオブジェクトがあるという事実が必要ない場合は、マッピングを次のように変更します。

var mapping = {
        promotionLevel: {
            create: function(ctx) {
                return new Foo.ReferenceDataModel(ctx);
            }
        },
        ...
    };

次に、単純なプロパティ名バインディングが機能するはずです。

<select data-bind="options: promotionLevels, 
               optionsText: 'description',  
               optionsValue: 'id', 
               value: promotionLevel, 
               optionsCaption: 'Choose...'"></select>
于 2012-11-20T12:41:50.793 に答える