durandal之将 jquery 插件结果加载到 Durandal View 中

虾米哥 阅读:14 2024-10-01 17:34:08 评论:0

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

<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> 

和 View 模型:

    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 中。一切正常,显示名称已填充,帖子按预期显示。

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

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

感谢您的帮助。

请您参考如下方法:

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


直接从 durandaljs.com 复制粘贴

“每当 Durandal 组合时,它还会检查您的模型是否有一个名为 viewAttached 的函数。如果它存在,它将调用该函数并将绑定(bind) View 作为参数传递。这允许 Controller 或presenter 在被注入(inject)其父级后的某个时间点可以直接访问其绑定(bind)的 dom 子树。

注意:如果您设置了 cacheViews:true,那么 viewAttached 只会在第一次显示 View 时调用,在初始绑定(bind)时,因为从技术上讲 View 是只贴一次。如果您希望覆盖此行为,请在您的组合绑定(bind)上设置 alwaysAttachView:true。” -- quoted from the site


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

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


标签:jquery
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号