Passando opzioni per i modelli in knockout 1.3

Question

In knockoutjs 1.2.1 che potevo fare:

<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/> 

<script id='Bar'> 
    {{if $item.fooMode}} FOO! {{/if}} 
</script> 

che ho cercato di tradurre per knockout 1.3.0beta come

<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/> 

<script id='Bar'> 
    <span data-bind="if: $item.fooMode">FOO!</span> 
</script> 

Ma il nuovo modello nativo il motore non rispetta le opzioni di modello.

C'è qualche altro modo in cui posso passare dati arbitrari in un modello?

Answer 1

Come hai scoperto, il motore di template nativo non supporta templateOptions che era un wrapper della funzionalità options del plug-in jQuery Template.

Due modi per andare: Inserire i dati nel modello di visualizzazione e utilizzare $root.fooMode o $parent.fooMode all'interno del modello. Questa sarebbe l'opzione più semplice.

In caso contrario, se non si desidera che il valore nel modello di vista, quindi è possibile utilizzare un custom vincolante per manipolare il contesto come:

ko.bindingHandlers.templateWithOptions = { 
    init: ko.bindingHandlers.template.init, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, context) { 
     var options = ko.utils.unwrapObservable(valueAccessor()); 
     //if options were passed attach them to $data 
     if (options.templateOptions) { 
      context.$data.$item = ko.utils.unwrapObservable(options.templateOptions); 
     } 
     //call actual template binding 
     ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, context); 
     //clean up 
     delete context.$data.$item; 
    } 
} 

Ecco un esempio di utilizzo: http://jsfiddle.net/rniemeyer/tFJuH/

Si noti che in uno scenario foreach, si troveranno le opzioni su $parent.$item anziché solo su $item.

Answer 2

Suggerirei la proposta di Sanderson in cui si passerebbero nuovi dati letterali a modelli che contengono dati modello e extra (opzioni modello).

data-bind="template: { name: 'myTemplate', data: { model: $data, someOption: someValue } }" 

lavoro Demo http://jsfiddle.net/b9WWF/

Fonte https://github.com/knockout/knockout/issues/246#issuecomment-3775317