0

私はkoで特にトリッキーな問題を抱えています。いくつかの例について説明しようと思います。

まず、これが私がレンダリングしようとしているhtmlジャンクです。foreach変数「Appliances」は配列であり、viewModelのプロパティです。オプションデータは、ビューモデルのプロパティ配列でもあります。ここでの名前はApplianceTypesです。

 <table>   
 <tbody data-bind="foreach: Appliances">
        <tr>
             <td>
                  <select data-bind="options: $root.ApplianceTypes, value: $data.ApplianceType.Id, optionsValue: 'Id', optionsText: 'ApplianceTypeDesc'">
                  </select>
             </td>
             <td>
                  <input data-bind="value: UnitNumber" />
             </td>                
        </tr>
 </tbody>
 </table>

さて、これを念頭に置いたので、アイデアをもう少しよく記入するためのデータを次に示します。

 var viewModel = {
    RequestNumber:37,
    UnitNumber:3,
    Appliances:[{
        Id:2,
        ApplianceType:{Id:5, ApplianceTypeDesc:"Water Heating Tankless"},
        ServiceApplianceQuantity:"1",
    }],
    ApplianceTypes:[
        {Id:5, ApplianceTypeDesc:"Water Heating Tankless"},
        {Id:1, ApplianceTypeDesc:"Dryer"},
        {Id:2, ApplianceTypeDesc:"Range"},
        {Id:3, ApplianceTypeDesc:"Heating"},
        {Id:4, ApplianceTypeDesc:"Water Heating"},
        {Id:6, ApplianceTypeDesc:"Fireplace"},
        {Id:7, ApplianceTypeDesc:"Make Up Air Heating"},
        {Id:8, ApplianceTypeDesc:"BBQ"}
    ]
    }

ですから、ここではまだ大きな問題はありません。アプライアンスごとに1行のUIを取得します。各行は、アプライアンスタイプで満たされたタイプドロップダウンです。自分が持っているものを編集しているだけの場合は、viewModel.Appliances [i] .ApplianceType.Idが更新され、生活は良好です。アプライアンス配列にnewを追加しようとすると、applianceType.Idが更新されません。そのためのコードは次のとおりです。

function ApplianceTypeViewModel() {
var self = this;
self.Id = ko.observable("5");
self.ApplianceTypeDesc = ko.observable("");
};

function ApplianceViewModel(applianceType) {
    var self = this;
    self.Id = ko.observable("-1");
    self.ApplianceType = ko.observable(applianceType);
    self.ServiceApplianceQuantity:"1"
};

viewModel.AddAppliance = function () {
    viewModel.Appliances.push(new ApplianceViewModel(new ApplianceTypeViewModel()));
};

最終的には、applianceTypeをAppliances [i] .ApplianceTypeを介して配列からコピーしておくと便利ですが、正直なところ、IDをそこで更新しようとしています。残りはサーバーで実行できます。

データが存在する場合は、毎回変更されます。（AddApplianceを使用して）新しく作成しても、データは変更されません。

みんな、ありがとう！

4

2 に答える 2

1

あなたのApplianceType中にあなたApplianceViewModelは観察可能です。ただしvalue、select要素のバインディングは

value: $data.ApplianceType.Id

Idオブザーバブル自体からではなく、オブザーバブルの値のプロパティを取得する必要があります。バインディングのその部分を次のように変更する必要があります。

value: ApplianceType().Id

ApplianceTypeあるいは、おそらくより良いオプションは、観察できないようにすることでしょう。通常、他のビューモデルではなく、オブザーバブルを観察する特定の値を作成する必要があります。

function ApplianceViewModel(applianceTypeViewModel) {
    var self = this;

    // ...
    self.ApplianceType = applianceTypeViewModel; // just assign the view model
};
于 2012-12-03T20:32:41.317 に答える
1

データバインディングに「Id」の部分をドロップするだけAppliances[i].ApplianceTypeで、選択したアプライアンスタイプが正しく入力されます。

value: $data.ApplianceType.Idする必要がありますvalue: $data.ApplianceType

valueバインディングがどのように機能するかの例については、このjsfiddleを確認してくださいhttp://jsfiddle.net/angelyordanov/gRxMq/。

そして、ここで動作するようにコードを変更しましたhttp://jsfiddle.net/angelyordanov/vvGgD/。

ノックアウトの設計方法はoptions、文字列だけでなく、任意のjavascriptオブジェクトの配列にすることができ、選択したアイテム（value）はそれらのオブジェクトの1つになります。optionsTextこれが、オプションの表示テキストを指定するためのバインディングがある理由です。

于 2012-12-04T09:13:06.670 に答える