Knockout nie aktualizuje widok, gdy szablon wiąże obsługi za pomocą $ data

Question

Próbuję napisać moje szablony KO w pewien sposób, i wydaje się, że powodują problemy z Knockout, który zatrzymuje aktualizowanie widoku. Życzę, aby uniknąć zbyt wiele wyraźnych zależności w moich poglądów, jak to możliwe, więc kiedy piszę szablon do dodawania do listy plików załączników, myślałem, że mogę skorzystać z zmiennej $data:

<script id="attachments-template" type="text/html"> 
    <input type="button" data-bind="attachments: $data" value="add"> 
</script> 

A oprawa szablonu:

<div data-bind="template: {name: 'button-add-data', data: attachments}"></div> 

Dzięki temu faktyczna właściwość jest odwzorowywana w miejscu użycia, a nie w przypadkowych szablonach. Procedura obsługi powiązań attachments w moim rzeczywistym przypadku obejmuje wtyczkę jQuery fileupload, ale samo wywołanie push(i++) pokazuje mimo to problem.

var i = 0; 
ko.bindingHandlers.attachments = { 
    init: function(element, valueAccessor) { 
     var files = valueAccessor(); 
     $(element).click(function() { 
      files.push(i++); 
     }); 
    } 
}; 

var list = ko.observableArray(); 
var model= { 
    attachments: list 
}; 

ryba, która pokazuje to, używając KO 2.2.0: http://jsfiddle.net/stofte/sWGkJ/ skrzypcach pokazuje również, że wiążący wobec wyraźnego nieruchomości działa dobrze.

Oczywiście jest wiele rzeczy w Google i SO na KO i kontekstach wiążących, ale nie mogę znaleźć niczego na temat użycia danych $ w wiążących programach obsługi, nie jestem pewien, co łamie mi prawo KO wykorzystanie danych $, ale wydaje się, że byłoby rozsądnie robić to, co chcę?

Answer 1

Wygląda na to, że nokaut nie oczekuje, że przekażesz observableArray do paramateru data na oprawie szablonu. Zwykle właśnie do tego służy foreach. Wygląda na to, że oczekuje on, że normalny obiekt zachowywał się poprawnie (potrzebne cytowanie, nie mógł znaleźć żadnych dokumentów poza tym, że wydaje się, że zachowuje się w ten sposób).

Stosując ten sam kod JS, że masz, najprostszym rozwiązaniem wydaje się byłoby zawinąć do zaobserwowania tablicę prosto w szablonie oprawa:

<script id="button-add-data" type="text/html"> 
    isObservable: <span data-bind="text: ko.isObservable(items)"></span><br> 
    toJSON: <span data-bind="text: ko.toJSON(items)"></span><br> 
    <input type="button" data-bind="attachments: items" value="doesnt update"> 
</script> 
<div data-bind="template: {name: 'button-add-data', data: { items: attachments }}"></div> 

Ewentualnie można zastąpić szablon bindingHandler i utworzyć nową Parametr, który można przekazać, upraszcza to podobne zachowanie. Link: knockoutjs overriding bindinghandlers