5

我正在使用 Hot Towel SPA 项目我试图在激活视图时调用一个简单的 js 函数。我看到的是调用激活函数时似乎没有加载该项目。

我还尝试将代码放入由 activate 调用的初始化函数中，如其他 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>
4

3 回答 3

12

根据与 DOM 交互的最新 Durandal 文档，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()); 
}
});
于 2013-09-28T15:06:25.167 回答
9

当 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

于 2013-05-08T15:49:44.577 回答
2

根据与 DOM 交互的 Durandal 文档，视图模型可以实现 4 个回调，以便与 DOM 元素交互，每个回调都传递一个DOMElement代表视图：

  • getView
  • beforeBind
  • afterBind
  • viewAttached

它指出这viewAttached是最常用的钩子。有关每个回调的更详细说明，请参阅文档。您可以在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 
    }
});
于 2013-05-08T16:20:47.193 回答