1

次の HTML を検討してください。

<select data-bind="options: assemblies, optionsText: 'Name', value: selectedAssembly">
</select>

Name <input type="text" data-bind="value: selectedAssembly().Name" />

jQuery AJAX経由でアセンブリ配列を取得しています:

[{"Id":1,"Name":"Foo"},
{"Id":2,"Name":"Bar"}]

selectedAssembly はオブザーバブルであり、 ().Name は例外をスローします。選択オプションの実行時の変更を反映して Name プロパティを変更する必要があります。私はもう試した：

<p data-bind="with: selectedAssembly">
    Name <input type="text" data-bind="value: $data.Name" />
 </p>

このようにして Name プロパティの取得に成功しましたが、その値の変更は、ユーザーがリアルタイムではなくボックスから別のオプションを選択したときにのみ更新されます。

4

2 に答える 2

1

ノックアウトは、あなたがやりたいことを指示することはできません。ID フィールドと Name フィールドに同じ値が含まれている場合は、それが可能になる場合があります。しかし、それはあなたが求めているものではなく、私は通常自分でそれをしません.

ko.computed を導入することでそれを行うことができます。以下は、 http://jsfiddle.net/photo_tom/P8R8b/7/で動作するフィドルにあるものです。

vm.selectedName = ko.computed({
    read: function() {
        var localVar = this.selectedAssembly(); // need for v8 compiler.
        if (localVar) {
            return localVar.Name();
        }
    },
    write: function(value) {
        var testValue = value.toLowerCase();
        var selArray = vm.assemblies();
        var l = selArray.length;
        for (var i = 0; i < l; i++) {
            var s = selArray[i].Name();
            if (s.toLowerCase() === testValue) {
                vm.selectedAssembly(selArray[i]);
            }
        }

    },
    owner: vm
});.

これが機能する方法は、読み取りプロパティが表示用の Name プロパティを返すことです。書き込みプロパティが鍵です。options 配列で名前の一致を検索し、その配列要素を現在のオプションとして設定します。

ただし、私のアプリケーションでは、ユーザーが目的の値を select ステートメントに直接入力できるオートコンプリート コンボ ボックスを使用します。https://stackoverflow.com/a/7538860/136717をご覧ください。それが私が現在自分のアプリをやっている方法です。

于 2012-12-16T17:17:45.703 に答える
1

選択したアイテムを編集できるようにするには、配列Name内のアイテムでプロパティを監視可能にする必要があります。assemblies

JSON からオブジェクトへのオブザーバブル プロパティの変換を手動で行うか、 この正確な問題を解決するために作成されたKnockout Mapping プラグインを使用できます。

使い方はとても簡単です:

function viewModel() {
    var self = this;    
    self.selectedAssembly = ko.observable();

    // you need to have a default item in assemblies
    // otherwise ko will set undefinied to selectedAssembly because it the 
    // assemblies collection is empty at the begining
    // which brakes the selectedAssembly().Name binding
    self.assemblies = ko.observableArray([{Name: ""}]);    

    $.getJSON('http://localhost:9000/api/assemblies', function(data){
        ko.mapping.fromJSON(data, {}, self.assemblies)
    });
}

ハードコーディングされたデータを含む簡略化されたJSFiddle。

于 2012-12-16T18:53:37.470 に答える