Associazione dati programmatica Knockoutjs all'interfaccia generata

Question

Sto lavorando a uno strumento di prototipazione rapida per il quale mi piacerebbe generare dinamicamente l'interfaccia e legare dinamicamente i dati agli elementi creati. Il ViewModel sarebbe simile:

var viewModel = { 
    vmSchema: { 
      "Id" : "int", 
      "Name" : "string", 
      "UpdatedOn" : "date" 
    }, 
    vmData: { 
      "Id": "123" 
      "Name" : "Bob", 
      "UpdatedOn" : "2012-11-16T00:00:00" 
    } 
} 

Il vmSchema sarebbero stati utilizzati per creare gli elementi dell'interfaccia in base al loro tipo, e quindi sarebbe vmData DataBind a quegli elementi.

Creare l'interfaccia non è un problema. La sfida è programmare in modo programmatico il mdoel di vmData all'interfaccia generata.

Esistono strumenti o tecniche che consentano questo tipo di associazione dati programmatica?

Answer 1

Sembra che i campi e i tipi del modello non saranno noti fino al runtime. Per questo tipo di modello generato dinamicamente, è necessario scrivere un codice che trasformi le sue proprietà in osservabili, assumendo che sia necessaria l'associazione a due vie. Alla base, si potrebbe iterare vmData e trasformare tutto in in una ko.observable:

for (var member in viewModel.vmData) { 
    if (viewModel.vmData.hasOwnProperty(member)) { 
     viewModel.vmData[member] = ko.observable(viewModel.vmData[member]); 
    } 
} 

Per quanto riguarda la visualizzazione di legame, dipende da ciò che è "creare gli elementi di interfaccia". Se possono aggiungere gli attributi data-bind agli elementi HTML al momento della creazione, tutto dovrebbe essere semplice: basta eseguire ko.applyBindings non appena l'interfaccia viene creata e collegata al DOM. Se per qualche motivo non è possibile aggiungere le decorazioni data-bind, è possibile specificare manualmente i collegamenti utilizzando lo spazio non documentato ko.applyBindingsToNode.

// manually specify a binding for an element 
var elm = document.getElementById('some_elm'); 
ko.applyBindingsToNode(elm, { value: viewModel.vmData.id}, viewModel.vmData); 

Quanto sopra è equivalente a <span class="some_elm" data-bind="value: vmData.id"></span>.