Enyo MVC 实现和粒子视图渲染

Posted 2023-02-23

【中文标题】Enyo MVC 实现和粒子视图渲染

【英文标题】：Enyo MVC implementation and particle view rendering

【发布时间】：2014-11-21 13:54:53

【问题描述】：

你能帮我用 enyojs 框架实现 MVC 当前的目标是为电视应用程序实现 N 个面板（显示器、窗口），这些面板将在按下按钮后进行更改（例如频道切换）。它看起来就像简单的重定向到 web 中的新 URL（或控制器的操作）。因此，我们希望使用同时仅保留 2 个显示的策略（当前和下一个我们使用动画）来重新渲染视图和部分视图并更新窗口（面板）。我从这里的其他主题中学习了一些带有 enyo 的 MVC 示例，但是 MVC 的实现仍然存在一些问题。

问题：如何在 enyo 中实现 particle 使用来自控制器的新数据更新视图？

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

);

前面的代码可以找到。 cmets中有一些问题。但是怎么实现这样的情况，那我不想重新渲染视图的所有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 ?
    

);

【参考方案1】：

您不应该调用 app.render() 来重新渲染您的应用程序。正如您所说，您不想每次都重新渲染整个事物。您是卡在 Enyo 2.3 上还是可以更新到更新的版本？控制器在很大程度上已被弃用。

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

如果你真的想这样做，你可以修改你的 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”控件的新控件和一个控件被渲染到的客户区，但这非常简单。不过，看看面板。这就是它们的设计目的。

【讨论】：

还有一个问题：还有他的.$.renderContentSection.createComponent(kind: partial);其中 partial 是类型（种类）而不是实例。是否有可能插入视图实例（带数据）？还是不推荐？

您可能希望使用addControl() 添加实例，尽管该方法受到保护。你会想更彻底地检查一下，或者想出一个不同的方法。