Функция вызова при просмотре загружена (активирована) в одностраничном приложении Hot Towel/Durandal

Я использую проект Hot Towel SPA. Я пытаюсь вызвать простую функцию js при активации представления. Я вижу, что элемент не загружается при вызове функции активации.

Я также попытался поместить код в функцию инициализации, вызываемую активацией, как это было предложено в других сообщениях SO. Это, кажется, не помогает.

Итак, какой рекомендуемый метод в Durandal/HotTowel для вызова функции при загрузке представления?

home.js (просмотреть модель)

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 (просмотреть)

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

javascript html single-page-application durandal hottowel
person Ben Ripley    schedule 08.05.2013    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Когда Durandal прикрепляет модель представления, он просматривает эту модель в поисках метода viewAttached. Я изменил ваш код ниже. Он должен найти элементы jQuery, которые вы ищете.

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

Взгляните на страницу «Композиция» внизу, чтобы узнать немного больше о viewAttached. http://durandaljs.com/documentation/Using-Composition.html

person adamlj    schedule 08.05.2013
comment
Также ознакомьтесь со страницей документации Взаимодействие с DOM. - person blachniet; 08.05.2013
comment
Красивый. Спасибо вам обоим! - person Ben Ripley; 08.05.2013
comment
Этот ответ больше не является правильным из-за изменений в Дюрандале. Функция viewAttached больше не вызывается. Также ссылка на документы битая. Пожалуйста, обновите свой ответ. - person Teodor Sandu; 08.10.2013
comment
Как описано в документации по преобразованию в Durandal 2.0, хук обратного вызова viewAttached был заменен. с attached. - person Vinney Kelly; 30.05.2014

arrow_upward
12
arrow_downward

Согласно последним документам Durandal в разделе Взаимодействие с DOM, viewAttached переименован в прикрепленный , поэтому ваш код с использованием Durandal 2 будет следующим:

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()); 
}
});
person Yevgen Safronov    schedule 28.09.2013
comment
это был хороший обновленный ответ для Durandal 2.0, как вы правильно сказали, другие подходили до 2.0 - person LearningNeverEnds; 31.12.2013

arrow_upward
2
arrow_downward

Согласно документам Durandal в разделе Взаимодействие с DOM, модели просмотра имеют 4 обратных вызова. они могут быть реализованы для взаимодействия с элементами DOM, каждому из которых передается DOMElement, представляющий представление:

  • getView
  • beforeBind
  • afterBind
  • viewAttached

В нем говорится, что viewAttached является наиболее часто используемым хуком. См. документы для более подробного описания каждого из обратных вызовов. Вы можете увидеть полный жизненный цикл в таблице в нижней части Обратные вызовы жизненного цикла перехвата.

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 
    }
});
person blachniet    schedule 08.05.2013