-1

ノックアウトを使用して、次の状況のユーザー インターフェイスを構築しています。 - アイテムの配列があります。各アイテムには、アイテムの詳細の配列があります。- アイテムの詳細は、「タイプ A」または「タイプ B」の 2 つのタイプのいずれかになります。- アイテムの詳細がタイプ A の場合、「サブタイプ A-1」と「サブタイプ A-2」の 2 つのサブタイプのいずれかを持つことができます。- 項目詳細がタイプ B の場合、サブタイプはありません。

私のフィドル

2 つの質問/問題があります。

  1. 「詳細タイプ」ドロップダウンの値に基づいて、「詳細サブタイプ」ドロップダウンを追加/削除したいと思います。たとえば、ユーザーが「タイプ B」を選択した場合、「詳細サブタイプ」ドロップダウンを削除したいと思います。また、基になる「サブタイプ」プロパティの値を null に設定したいと思います。私はifバインディングで遊んだが役に立たなかった
  2. ビュー モデルの addItemDetail メソッドで、新しいアイテムの詳細を追加するにはどうすればよいですか?
4

2 に答える 2

0

1) あなたはほとんどそれを持っていました. if 式に () がありませんでした。

2) このようにアイテムの詳細を追加できます ...

addItemDetail = function(item) {
    // what should be here to add a new detail to an item?
    selectedItem().itemDetails.push(new pm.ItemDetail());
};

また、新しいアイテムを通じてアイテムの詳細を追加する方法も変更しました。以下のフィドルの for ループに注目してください。

このフィドルには上記のすべてがあります。

http://jsfiddle.net/johnpapa/FWFPV/

于 2012-08-10T17:21:04.377 に答える
0

アイテムの詳細は、オブザーバブルではなく、通常のプロパティを含む通常のオブジェクトを含むオブザーバブル配列です。「pm.itemDetail」コンストラクター関数を既に作成しているので、それを使用しないのはなぜですか?

pm.Item = function(name, itemDetails) {
    // ...    
    var details = [];
    for (var i = 0; i < itemDetails.length; i++) {
        details.push( new pm.ItemDetail(itemDetails[i]) );
    }
    self.itemDetails = ko.observableArray(details);
};

pm.ItemDetail 関数を少し更新しました。

pm.ItemDetail = function(data) {
    var self = this;
    self.name = ko.observable(data.name);
    self.type = ko.observable(data.type);
    self.subtype = ko.observable(data.subtype);
};

これで、「可視」バインディングを使用できるようになりました (「if」バインディングは、ノード自体ではなく、DOM ノードのコンテンツを非表示にします)。

data-bind="visible: type() == 1, ..."

新しいアイテムの詳細を追加するには、「pm.ItemDetail」のインスタンスを作成し、現在選択されているアイテムの itemDetails 配列にプッシュします。

addItemDetail = function(item) {
    selectedItem().itemDetails.push(new pm.ItemDetail({
        name: "Please enter a name",
        type: 1,
        subtype: 1
    }));
};

http://jsfiddle.net/XscRT/6/

于 2012-08-10T17:27:11.130 に答える