Why the view not redraw with m.request in Mithril?

Question

I have this example:

controller : function() {
    var responseFolder = m.prop("");
    var pathDirectory = m.prop("C://");` 

    function clickChangeFolder(folder) {
        pathDirectory(pathDirectory() + folder + "/");
        responseFolder(m.request({
            method : "GET",
            url : "my url",
            data : {root:pathDirectory()}
        }));
    }  
    return {
        responseFolder: m.request({
            method : "GET",  
            url : "http://localhost:8080/Mithril_directory/GetFolders",
            data : {root:pathDirectory()}
        }),
    }

view : function(ctrl) {
    return [
        m("ul" , ctrl.responseFolder().map(function(folder) {
            return [
                m("li.liFolder" , {
                    onclick : ctrl.clickChangeFolder.bind(null, folder.name)
                }, 
                folder.name), 
           ];
      })
 ]}

The first time the request is ok but when I click in the folder the second request is ok but the view not redraw, why?

Answer 1

From the mithril documentation,

The basic usage pattern for m.request returns an m.prop getter-setter, which is populated when the AJAX request completes.

So what happens with your code is that on the controller's return object, ctrl.responseFolder is an m.prop that has nothing to do with the responseFolder variable declared before.

In order to get the view redrawn after each click, you need to assign the initial request to responseFolder, so it will become a getter-setter, and then return it to the view, which will be re-rendered on each new request.

var responseFolder = m.request({...});
...
return {
    responseFolder: responseFolder,
    ...
};