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

});

Related posts

Recent Viewed