Funkcja wywołania w widoku załadowanym (aktywacja) w trybie Hot Towel/Durandal Single Page App

Question

Używam projektu Hot Towel SPA Próbuję wywołać prostą funkcję js, gdy widok jest aktywny. To, co widzę, to to, że element nie jest załadowany po wywołaniu funkcji aktywacji.

Próbowałem również umieścić kod w inicjalizacji funkcji wywołanej przez aktywować jak sugerowano w innych postów SO. To wydaje się nie pomagać.

Jaka jest zalecana metoda w Durandal/HotTowel do wywoływania funkcji przy ładowaniu widoku?

home.js (widok modelu)

define(['services/logger'], function (logger) { 
    var vm = { 
     activate: activate, 
     title: 'Home' 
    }; 

    return vm; 

    function activate() {  
     logger.log('Home View Activated', null, 'home', true); 
     return init(); 
    } 

    function init() { 
     $("#backBtn").hide(); 
     console.log($("#myBtn").html()); // returns undefined 
    } 
}); 

home.html (Widok)

<section> 
    <div id="myBtn">test</div> 
</section> 

Answer 1

Kiedy Durandal przywiązuje model widzenia wygląda na tym modelu dla metody viewAttached. Zmodyfikowałem twój kod poniżej. Powinien znaleźć elementy jQuery, których szukasz.

define(['services/logger'], function (logger) { 
    var vm = { 
     activate: activate, 
     viewAttached: viewAttached 
     title: 'Home' 
    }; 

    return vm; 

    function activate() {  
     logger.log('Home View Activated', null, 'home', true); 
    } 

    function viewAttached(view) { 
     $(view).find("#backBtn").hide(); 
     console.log($(view).find("#myBtn").html()); 
    } 
}); 

Spójrz na stronę Kompozycja na dole, aby dowiedzieć się więcej o viewAttached. http://durandaljs.com/documentation/Using-Composition.html

Answer 2

Zgodnie z docs Durandal w Interacting with the DOM, widok modele mają 4 wywołania zwrotne mogą wdrożyć w celu interakcji z elments dom, z których każdy jest podjęło DOMElement reprezentujących pogląd:

• getView
• beforeBind
• afterBind
• viewAttached

Wskazuje, że najczęściej używanym haczykiem jest viewAttached. Zobacz dokumentację, aby uzyskać bardziej szczegółowy opis każdego z wywołań zwrotnych. Pełny cykl życia można zobaczyć w tabeli na dole tabeli Hooking Lifecycle Callbacks.

define(['services/logger'], function (logger) { 
    var vm = { 
     activate: activate, 
     getView: getView, 
     beforeBind: beforeBind, 
     afterBind: afterBind, 
     viewAttached: viewAttached, 
     title: 'Home' 
    }; 

    return vm; 

    function activate() {  
     logger.log('Home View Activated', null, 'home', true); 
     return init(); 
    } 

    function getView(view) { 
    } 

    function beforeBind(view) { 
    } 

    function afterBind(view) { 
    } 

    function viewAttached(view) { 
     $("#backBtn").hide(); 
     console.log($("#myBtn").html()); // returns undefined 
    } 
}); 

Answer 3

Według najnowszych docs Durandal w Interacting with the DOM, viewAttached przemianowany na załączony, więc kod za pomocą Durandal 2 będzie następujący:

define(['services/logger'], function (logger) { 
var vm = { 
    activate: activate, 
    attached: attached 
    title: 'Home' 
}; 

return vm; 

function activate() {  
    logger.log('Home View Activated', null, 'home', true); 
} 

function attached(view, parent) { 
    $(view).find("#backBtn").hide(); 
    console.log($(view).find("#myBtn").html()); 
} 
});