将 jquery 插件结果加载到 Durandal 视图中

2024-06-27

我正在使用 mvc4 的 Durandal 入门模板。我设置了以下简单视图:

<section>
    <h2 data-bind="html: displayName"></h2>
     <h3 data-bind="html: posts"></h3>
     <button data-bind="click: getrss">Get Posts</button>
     <div id="rsstestid" ></div>
</section>

和视图模型:

    define(function (require) {
    var http = require('durandal/http'),
        app = require('durandal/app');

    return {
        displayName: 'This is my RssTest',
        posts: ko.observable(),
        activate: function () {
            return;
        },
        getrss: function () {
            $('#rsstestid').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews');
            return;
        }
    };
});

正如您所看到的,它只是使用 zRssReader 插件在单击“获取帖子”按钮时将帖子加载到 div 中。一切正常,显示名称已填充,帖子按预期显示。

我遇到麻烦的是当我尝试消除该按钮并尝试在创建时加载帖子时。如果我将插件调用放在激活函数中,则不会得到任何结果。我认为这是因为视图未完全加载,因此该元素不存在。我有两个问题:

  1. 如何延迟插件调用的执行,直到视图完全组合?
  2. 更好的是,如何将插件结果加载到可观察的 posts 中,而不是使用查询选择器?我尝试了很多组合但没有成功

感谢您的帮助。


编辑** 以下答案适用于 durandal 1.2。在杜兰达尔2.0中viewAttached已更改为attached


直接从 durandaljs.com 复制粘贴

“每当 Durandal 编写时,它还会检查您的模型中是否存在名为viewAttached。如果存在,它将调用该函数并将绑定视图作为参数传递。这允许控制器或呈现器在注入其父级后的某个时间点直接访问其绑定的 dom 子树。

注意:如果您设置了cacheViews:true then viewAttached仅在首次显示视图时(在初始绑定时)调用,因为从技术上讲,视图仅附加一次。如果您想覆盖此行为,请设置alwaysAttachView:true关于您的作文绑定。” --引自该网站 http://durandaljs.com/documentation/Composition/


有很多方法可以做到这一点,但这里只是一种快速但肮脏的方法:

<section>
    <h2 data-bind="html: displayName"></h2>
     <h3 data-bind="html: posts"></h3>
     <button data-bind="click: getRss">Get Posts</button>
     <div id="rsstestid"></div>
</section>

和代码:

define(function (require) {
    var http = require('durandal/http'),
        app = require('durandal/app');

    var $rsstest;

    return {
        displayName: 'This is my RssTest',
        posts: ko.observable(),
        viewAttached: function(view) {
           $rssTest = $(view).find('#rsstestid');
        },
        getRss: function() {
           $rssTest.rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews');
        }
    };
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 jquery 插件结果加载到 Durandal 视图中 的相关文章

  • 如何使用 Durandal 导航下拉菜单?

    我刚刚开始与 Durandal 合作 所有部分都已就位 并且正在使用热毛巾模板来加快速度 让我困惑的一件事是如何创建比按钮组更复杂的分层导航系统 这就是我想要的结果 ABCA1 B1 C1A2 B2 C2 A B 和 C 是顶级菜单 没有附
  • 如何使用 durandal 处理/忽略不良路线?

    我正在尝试有条件地阻止访问某条路线 我认为这可以通过guardRoute来完成 http durandaljs com documentation Router function guardRoute routeInfo params in
  • Durandal.js 优化器不工作(空 main-built.js)

    我正在尝试让 Durandal js 优化器在我的测试项目上工作 但它似乎不会为 main built js 生成任何内容 我在 durandal amd 文件夹中的 node js 命令提示符下使用以下命令 optimizer exe v
  • Durandal 2.0 自定义对话框

    我希望制作一个 Durandal 自定义对话框 在现有的可组合视图模型周围添加一个带有标题和页脚的窗口框架 我制作了一个 customModal html 模板 div class messageBox div class modal he
  • 使用 childRouter 时的 Durandal 路由器/生命周期事件

    在使用 Durandal 构建的单页应用程序中 我有一个设置视图 其中包含不同的部分 我使用 childRouter 来解析不同的部分 在此应用程序中 许多代码挂钩到 Durandal 使用的组合生命周期事件 例如 这个自定义绑定 ko b
  • 具有多语言支持的 Durandal(淘汰赛)应用程序

    我正在为我正在开发的应用程序建立多语言支持 经过一些研究并阅读SO 国际化最佳实践 https stackoverflow com questions 228835 best practice javascript and multilan
  • ko.validation.group 没有检测到我的嵌套 observableArray 上的错误

    我使用 Durandal Breeze 开发了一个使用密集型 Knockout 绑定的项目 我有一个使用以下可观察的视图 packing description weight isotopes name activity 正如你在上面看到的
  • Durandal 登录页面重定向模式

    TL DR要求用户登录才能查看 Durandal 单页面应用程序 SPA 中的某些页面的好模式是什么 我需要一个系统 如果用户尝试导航到需要登录的 页面 他们会被重定向到登录页面 在此登录页面上成功进行身份验证后 我希望应用程序将它们重定向
  • 用热毛巾和 durandal 连接到另一个控制器

    我正在开发一个带有多个 spa 的 mvc4 应用程序 我正在为我的水疗中心使用热毛巾模板 我想要做的是在我的视图中为水疗中心添加一个锚链接 转到另一个控制器的索引操作 以便我的用户可以退出一个水疗中心并打开另一个水疗中心 并非所有操作都会
  • 有没有办法访问 TypeScript 模块中的“导出”对象?

    我正在尝试使用 durandal 我需要getModuleId通过通过current模块 我的问题是 当我使用 TypeScript 时 从 AMD 模块返回的底层对象似乎无法通过 Typescript 代码访问 export functi
  • Durandaljs 可以做区域吗

    我正在尝试查看是否有办法在 Durandaljs 中进行区域操作 类似的东西 App areas home views viewmodels other views viewmodels 我看到 viewLocator 允许这种约定 vie
  • 淘汰赛js的无容器声明在热毛巾SPA中​​不起作用?

    我试图使用无容器语句 例如热毛巾模板中的淘汰赛 js 但它不起作用 相反 如果我使用与某些元素 如 div 的可见绑定 那么它工作得很好 div div 谁能告诉我 knockoutjs 的无容器语句在热毛巾模板中是否不起作用 在默认热毛巾
  • Breezejs EntityManager MetadataStore 和 fetchEntityByKey

    我有一个 SPA 应用程序 durandaljs 并且有一条特定的路线 可以在其中映射我想要获取的实体的 id 模板是 todoDetail id 例如 todoDetail 232 或 todoDetail 19 在 viewmodel
  • Gulpfile.js 加载失败

    Visual Studio 任务运行程序无法加载 gulp 文件 我用VS2017 v15 9 4然而 现在这个项目是几年前开发的 Failed to run Gulpfile js cmd exe c gulp tasks simple
  • DurandalJS 路由行为

    我拥有的 试图了解发生了什么以及如何控制它 我对尚未经过身份验证的用户有一个 公共 视图 对经过身份验证的用户有一个 主页 视图 这是我的路线配置 app start then function Replace viewmodels in
  • 使用 r.js 打包使用“文本”加载视图的 SPA 应用程序

    我正在尝试使用 grunt 将 SPA 应用程序 requirejs durandal 2 knockout 构建到单个 main build js 文件中 并且我遇到了 durandal 用于加载我的 文本 插件的严重问题意见 在开发中
  • 如何在Durandal路由器中使用splat参数?

    我正在看的文章是杜兰达尔路由器 http durandaljs com documentation Router html Under mapAuto 它说我们可以在 url 中传递 splat 参数 customers 1 和activa
  • Durandal:多条路线,一个视图模型/视图

    我有 3 条路线 items one items two 和 items Three 它们都指向 items vm view 在 items js activate 函数中 我正在检查 url 并基于此更改过滤器 function acti
  • Chrome//kendoUI/jQuery:超出最大调用堆栈大小

    我正在使用 hottowell 模板来创建 spa 应用程序 并且我从 jquery 中收到了一个很好的错误 基本上我的问题从此刻开始尝试绑定我的视图 viewModelBinder js 来自 durandal 库 viewModelBi
  • 将 jquery 插件结果加载到 Durandal 视图中

    我正在使用 mvc4 的 Durandal 入门模板 我设置了以下简单视图 section h2 h2 h3 h3 section

随机推荐