Question

你能帮我用enyojs框架实现MVC实现吗？目前的目标是实现电视应用的N面板（显示器，窗口），按下按钮后会改变它（例如频道切换）。它看起来就像简单地重定向到Web中的新URL（或控制器的动作）。因此，我们希望重新渲染视图和部分视图，并使用同时保持2个显示的策略更新窗口（面板）（当前和下一个我们使用动画）。我在这里从其他主题中学习了一些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或者您可以更新到更新的版本？控制器在很大程度上已经被弃用了。

我建议看一下Panels组件。您可以在区域中放置一个Panels组件，该组件可以更改并导航到面板，并将您想要的任何内容推送到该面板中。您的各个部分都是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/

您可以使用＆＃39; chrome＆＃39;创建一个新的控件。控件和控制渲染的客户区域，但这很简单。不过，看一下Panels。这是他们的目的。

Enyo MVC实现和粒子视图渲染

1 个答案: