javascript - Enyo MVC实现和粒 subview 渲染

Question

你能帮我用enyojs框架实现MVC吗当前的目标是为电视应用实现 N 面板(显示器、窗口)，按下按钮后(例如 channel 切换)将发生变化。它看起来就像简单地重定向到 web 中的新 URL(或 Controller 的操作)。因此，我们希望使用同时保留 2 个显示器的策略来重新渲染 View 和部分 View 并更新窗口(面板)(当前和下一个我们使用动画)。我从其他主题中学习了一些 MVC 与 enyo 的示例，但是 MVC 的实现但仍然存在一些问题。

问题:如何在 enyo 中使用 Controller 中的新数据实现 View 的粒子更新？

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

});

前面的代码可以找到。评论里有一些问题。但是如何实现这样的情况，那么我不想重新渲染 View 的所有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 上，或者可以更新到更新的版本吗？其一， Controller 已在很大程度上被弃用。

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

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

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

这是一个 fiddle 来展示这一点:http://jsfiddle.net/RoySutton/LhjLv6hy/

您可以创建一个带有“chrome”控件和控件渲染到的客户区的新控件，但这非常简单。不过，请看一下面板。这就是它们的设计目的。