Przechodząc opcje szablonów nokautem 1.3

Question

W knockoutjs 1.2.1 mogłem zrobić:

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

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

które starałem się przełożyć na knockout 1.3.0beta jak

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

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

ale nowy szablon natywnej silnik nie szanuje templateOptions.

Czy istnieje inny sposób przekazywania dowolnych danych do szablonu?

Answer 1

Odkryty macierzysty silnik szablonów nie obsługuje templateOptions, który był opakowaniem funkcji wtyczki szablonu jQuery Template o nazwie options.

Dwa sposoby na wykonanie: Umieść dane w swoim modelu widoku i użyj wewnątrz szablonu szablonu $root.fooMode lub $parent.fooMode. To byłaby najłatwiejsza opcja.

przeciwnym razie, jeśli nie chcesz, aby wartość w widoku modelu, a następnie można użyć niestandardowego wiązania manipulować kontekst jak:

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; 
    } 
} 

Oto przykład w użyciu: http://jsfiddle.net/rniemeyer/tFJuH/

Należy pamiętać, że w scenariuszu foreach można znaleźć opcje na $parent.$item, a nie tylko $item.

Answer 2

Proponuję propozycję Sandersona, w której należy przekazać nowe dane literalne do danych szablonu zawierających dane modelu i dodatkowe (opcje szablonu).

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

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

Źródło https://github.com/knockout/knockout/issues/246#issuecomment-3775317