Enyo MVC implementation and particle view rendering

Question

Could you please help me with MVC implementation with enyojs framework The current goal is to implement N -panels (displays, windows) for TV application which would be changed after button was pressed (channel switch for instance). It looks just like simple redirect to new URL (or controller's action) in web. So, we want to re-render views and parts of views and update windows(panels) using strategy of keeping just 2 displays at the same time (current and next we go with animation). I learned some examples of MVC with enyo from other topics here, but that implementations of MVC but some questions are still exist.

Problem: how to implement in enyo the particle updating of the view with new data from controller ?

//--- app.js
enyo.kind({
    name: "my.Application",
    kind: "enyo.Application",
    view: "Index", // default start view    
    controllers: [ // I use 2.3 version and know about this rudiment property.
                {name: "homeController", kind: "HomeController"}                
            ],          
    viewChanged : function() { 
        this.inherited(arguments); 
        app.render();  // this updates the view. Changes from index to edit and back. 
    }   
});

enyo.ready(function () {
    app = new my.Application({name: "app"});
});


//------  controller.js + IndexView.js + editview.JS


enyo.kind({
    name : "IndexView",
    kind: "enyo.View",
    components: [
                 {content: "HelloWorld,  This is Index"},
                 {content: "This is the Index view"},
                 {kind: "moon.ToggleButton", content: "Show Edit", ontap: "buttonTapped"}
                 ],
    // redirect to Edit View
    buttonTapped: function(sender, event){
        app.controllers.homeController.Edit("message(model) to Edit View");
    }

});


enyo.kind({
    name : "EditView",
    kind: "enyo.View",
    message: "no msg",
    components: [
                 {name: "headWithId", content: "Hello! This is EDIT."},
                 {content: "This is the Edit view"},
                 {kind: "moon.ToggleButton", content: "Show Index", ontap: "buttonTapped"}
    ],

    bindings: [
              {from: ".message", to:".$.headWithId.content"}
    ],

    // redirect to Index View
    buttonTapped: function(sender, event){              
        app.controllers.homeController.Index();     
    }
});


enyo.kind({
    name : "HomeController",
    kind: "enyo.Controller",

    Index : function(){     
        app.set("view", new  IndexView()); // this code updates the view of app, but maybe there is a better way to do it?      
    },

    Edit : function(msg){
        app.set("view", new  EditView({message: msg}));     
    }

});

The previous code works find. There some question in comments. But how to implement such situation, then I don't want to rerender all the divs of the view, but just particle content (for example, leave the header and update the content):

// ----- baselayoutview.js

enyo.kind({
    name : "BaseLayout",
    kind: "enyo.ViewController", // or enyo.View... what is better?
    components: [
                 {content: "this content of the  View never changes"},
                     // next content should be changed. It's for renderTarget 
                 {name: "RenderContentSection"} // How to render new content form Index or Edit view here?
            ]

});

// ----- app.js

enyo.kind({
    name: "my.Application",
    kind: "enyo.Application",
    view: "BaseLayout",  // We set this base layout view and expect the it will fill it's content by itself 

    controllers: [
                {name: "homeController", kind: "HomeController"}                
            ],

    viewChanged : function() { 
        this.inherited(arguments); 
        app.render("RenderContentSection");  // I think it would not be working any more.. but what it the best way to do it? How to update BaseLayout view's RenderContentSection ?
    }

});

Answer 1

You should not be calling app.render() to re-render your application. As you say, you don't want to re-render the whole thing each time. Are you stuck on Enyo 2.3 or can you update to a more recent version? Controllers have been largely deprecated, for one.

I suggest taking a look at the Panels component. You can place a Panels component within your area that changes and navigate to a panel and push whatever content you want into that panel. You individual sections would be Panel components and you can push and pop those as needed. If you need to replace the panel.

If you really want to do it that way, you can modify your BaseLayout component so that it uses createComponent() to create whichever partial view you want.

enyo.kind({
    name : "BaseLayout",
    // This can be just a plain enyo.Control
    components: [
         {content: "this content of the  View never changes"},
         // next content should be changed. It's for renderTarget 
         {name: "renderContentSection"} // How to render new content form Index or Edit view here?
    ],
    replacePartial: function(partial) {
        this.$.renderContentSection.destroyClientControls();
        this.$.renderContentSection.createComponent({kind: partial});
        this.$.renderContentSection.render();
    }
});

Here's a fiddle showing that off: http://jsfiddle.net/RoySutton/LhjLv6hy/

You could create a new control with a 'chrome' controls and a client area that controls get rendered into, but this is pretty simple. Still, take a look at Panels. It's what they were designed for.