Loading jquery plugin result into Durandal view

Question

I am using the Durandal Starter Template for mvc4. I have set the following simple 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>

and ViewModel:

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

As you can see, it is simply using the zRssReader plugin to load posts into a div when the 'Get Posts' button is clicked. Everything works fine, the display name is populated and the posts show up as expected.

Where I am having trouble is when I try to eliminate the button and try to load the posts at creation time. If I place the plugin call in the activate function, I get no results. I assume this is because the view is not fully loaded, so the element doesn't exist. I have two questions:

1. How do I delay the execution of the plugin call until the view is fully composed?
2. Even better, how do I load the plugin result into an the posts observable rather than using the query selector? I have tried many combinations but no luck

Thanks for your help.

Answer 1

EDIT** the below answer is for durandal 1.2. In durandal 2.0 viewAttached has changed to attached

---

Copy pasted directly from durandaljs.com

"Whenever Durandal composes, it also checks your model for a function called viewAttached. If it is present, it will call the function and pass the bound view as a parameter. This allows a controller or presenter to have direct access to the dom sub-tree to which it is bound at a point in time after it is injected into its parent.

Note: If you have set cacheViews:true then viewAttached will only be called the first time the view is shown, on the initial bind, since technically the view is only attached once. If you wish to override this behavior, then set alwaysAttachView:true on your composition binding." --quoted from the site

---

There are many ways you can do it but here is just 1 quick and dirty way:

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

and the code:

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