在热毛巾/Durandal单页应用程序中查看加载(激活)的呼叫功能

Call Function on View Loaded (Activate) in Hot Towel/Durandal Single Page App

本文关键字：激活 加载 功能 呼叫 毛巾 Durandal 单页 应用程序      更新时间：2023-09-26

我正在使用热毛巾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(视图)

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

根据最新的Durandal文档在与DOM交互时，viewatattached重命名为attached，所以你使用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()); 
}
});

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

查看底部的Composition页面，了解更多关于viewAttached的信息。http://durandaljs.com/documentation/Using-Composition.html

根据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 
    }
});
相关文章：