2012-10-02 15 views
9

私はオブジェクトにいくつかのHTMLをバインドする必要がありますが、私の問題は開発時にオブジェクトのプロパティを知らないことです。ノックアウトJSオブジェクトのプロパティにバインド

私は私が私のHTML内のセクションに結合した私のメインビューモデルにselectedItem性質を持っている:

<div data-bind="with: selectedItem"> 

</div> 

は、今私は、プロパティ名とプロパティ値に基づいて、テーブルを生成したい:

<div data-bind="foreach: [WHAT DO I PUT HERE?]"> 
    <label class="control-label"><span data-bind="text: [OR HERE?]" /></label> 
</div> 

私は実際どのようにこれを行うのか分かりません。どんな助けでも大歓迎です。

また、これをわずかに拡張して、バインドされたオブジェクトのプロパティを異なる方法で処理したいと思います。プロパティがプリミティブ型の場合は出力しますが、別のオブジェクト/配列の場合は処理します特別に。

これはできますか?

答えて

4

Hereは、を使用して、実行時に表示するデータを実行時に選択するために計算されたを使用する実例です。ダイナミックに選択されたtemplatesは、レンダリングするデータのタイプ(配列またはスカラー)に従ってデータをレンダリングするためにも使用されます。

+0

を追加するためにこれを使用することができますこれが設計時に私が知りませんビューモデルのプロパティにアクセスする方法を正確に参照してください。あなたは詳細を教えていただけますか? – Mark

+1

プロパティ "selected"には、ビューモデルで選択するプロパティの名前が含まれます(実行時に変更可能)。この値(観測可能)を変更すると、プロパティ "data"(観測可能に計算された)の更新がトリガーされます。この最後のプロパティは、対応するテンプレートを使用してレンダリングするデータ(list1またはitem1)を動的に選択します(_self [selection] _を参照)。この例を明確にすることを願っています。 – gbs

+0

ああ、あなたが何をしたのか分かります、ありがとう。しかし、おそらく私はあなたの考えを理解していないか、おそらく私は十分に問題を説明していない。私はModelクラスがXプロパティを持っています(ケース2では約20です)、すべてのプロパティをリストし、そのプロパティのタイプに基づいてテンプレートを選択したいと思います。あなたの例では、選択リストにプロパティをハードコーディングしていますが、私はそれらを知っていません...それは意味がありますか? – Mark

13

誰かが単純なオブジェクトのプロパティをバインドしようとしている場合。あなたはこのようにそれを行うことができます...

<table> 
    <tbody data-bind="foreach: arrayOfObjects"> 
     <tr data-bind="foreach: Object.keys($data)"> 
      <td data-bind="text: $parent[$data]"></td> 
     </tr> 
    </tbody> 
</table> 

注:object.keysは、古いブラウザではサポートされていませんが、これは良いスタートですが、私は失敗し、下位互換性http://whattheheadsaid.com/2010/10/a-safer-object-keys-compatibility-implementation

関連する問題