2012-10-02 12 views
9

Ho bisogno di associare un codice HTML a un oggetto, ma il mio problema è che non conosco le proprietà dell'oggetto in fase di sviluppo.knockout JS si lega alle proprietà dell'oggetto

Ho un immobile selectedItem a mio principale modello di vista che ho legato a una sezione nel mio HTML:

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

</div> 

Ora voglio generare una tabella basata sul nome della struttura e proprietà valori:

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

Non ho davvero idea di come farlo. Qualsiasi aiuto è molto apprezzato.

Inoltre, estendendolo leggermente, vorrei gestire le proprietà dell'oggetto associato in modo diverso, ad specialmente

Questo può essere fatto?

risposta

4

Here è un esempio funzionante utilizzando osservabile calcolato per selezionare a runtime i dati da mostrare. Dinamicamente selezionato templates vengono anche utilizzati per il rendering dei dati in base al tipo di dati da rappresentare (matrice o scalare).

+0

Questo è un buon inizio, ma non riesco per vedere esattamente come questo mi darà accesso alle proprietà del modello di vista che non conosco in fase di progettazione. Puoi per favore elaborare? – Mark

+1

Sicuro. La proprietà "selected" contiene il nome della proprietà da selezionare nel viewmodel (può essere modificato in fase di runtime). La modifica di questo valore (osservabile) attiverà l'aggiornamento dei "dati" di proprietà (osservabili calcolati). Quest'ultima proprietà seleziona dinamicamente (vedi _self [selection] _) i dati (list1 o item1) per renderizzare usando il template corrispondente. Spero che questo chiarisca l'esempio. – gbs

+0

Ah, capisco cosa hai fatto, grazie. Ma forse mi mancano i miei pensieri, o forse non ho descritto il problema abbastanza bene. La classe Model ha proprietà X (nel tuo caso 2 ma la mia ha circa 20), voglio elencare tutte le proprietà e scegliere un modello basato sul tipo di quella proprietà. Nel tuo esempio, hai hard coded le proprietà nell'elenco di selezione, dove come non le conosco ... ha senso? – Mark

13

Se qualcun altro sta cercando di associare le proprietà di un oggetto semplice. Si può fare in questo modo ...

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

nota: object.keys non è supportato nei browser meno recenti, ma è possibile utilizzare questo per aggiungere compatibilità all'indietro http://whattheheadsaid.com/2010/10/a-safer-object-keys-compatibility-implementation

Problemi correlati