Enyo实现与粒子视图渲染

Question

请您帮助我用enyojs框架实现MVC，目前的目标是为电视应用程序实现N个-panels (显示，窗口)，在按下按钮(例如频道切换)后会进行更改。它看起来就像简单地重定向到web中的新URL (或控制器的操作)。因此，我们想要重新呈现视图和部分视图，并更新窗口(面板)，使用的策略是同时保持两个显示(当前和下一个我们使用动画)。我从这里的其他主题中学到了一些MVC与enyo的例子，但是MVC的实现仍然存在一些问题。

问题:如何用控制器提供的新数据在enyo实现粒子视图更新？

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

});

前面的代码可以找到。在评论中有一些问题。但是如何实现这样的情况，那么我就不想更改视图的所有div，而只是粒子内容(例如，保留标题并更新内容)：

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

您不应该调用app.render()来重新呈现应用程序。就像你说的，你不想每次都重新渲染整个东西。您是停留在Enyo 2.3上，还是可以更新到更新的版本？例如，调度员在很大程度上受到了反对。

我建议看一下面板组件。您可以在您的区域中放置面板组件，该组件将更改并导航到面板，并将任何您想要的内容推入该面板。您的各个部分将是Panel组件，您可以根据需要推送和弹出这些组件。如果你需要更换面板。

如果您真的想这样做，您可以修改您的BaseLayout组件，以便它使用createComponent()来创建您想要的任何部分视图。

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

这里有把小提琴展示出来：http://jsfiddle.net/RoySutton/LhjLv6hy/

您可以使用“chrome”控件和控件呈现到的客户端区域创建一个新控件，但这非常简单。尽管如此，看看面板。这就是他们设计的目的。