视图实际上应该做什么？

在阅读了过去几周的Marionette和一般的MVC架构之后，我仍然不清楚MV *中的View究竟应该做什么。我读过的每个代码示例，博客文章或教程都将不同数量的逻辑放在视图中，或使用基本弃用的.on事件处理。视图实际上应该做什么？

我的直觉告诉我，该模型包含数据，视图火灾事件，以及控制器监听并处理这些事件。我努力尽可能多地保留视图中的逻辑，就像听起来那样怪异。

作为一个例子，我创建了一个JSFiddle，只需在控制器中使用.listenTo即可将一个视图切换到另一个视图。我本来可以使用布局和切换区域，但我希望尽可能小的代码。

我在正确的轨道上吗？应该如何看待只有呈现一个界面和呐喊事件，而不在View代码中对它们中的任何一个进行操作？这个逻辑应该在控制器中吗？或者这是否偏离了拥有精益控制器的原则？

谢谢。

下面是详细代码：

HTML

<script id="part1-template" type="text/template"> 
    <%= part1blurb %> <input type="button" id="goToPart2" value="OK" /> 
</script> 

<script id="part2-template" type="text/template"> 
    <%= part2blurb %> 
</script> 

<div id="main"></div>

型号

var MyModel = Backbone.Model.extend({ 
    defaults: { 
     part1blurb: 'This is part one', 
     part2blurb: 'This is part two' 
    } 
});

查看

var Part1View = Backbone.Marionette.ItemView.extend({ 
    model: new MyModel(), 
    template: '#part1-template', 
    triggers: { 
     'click #goToPart2': 'part1:done' 
    } 
}); 

var Part2View = Backbone.Marionette.ItemView.extend({ 
    model: new MyModel(), 
    template: '#part2-template' 
});

控制器

var PageController = Backbone.Marionette.Controller.extend({ 
    _views: { 
     part1: new Part1View(), 
     part2: new Part2View() 
    }, 
    initialize: function() { 
     this.listenTo(this._views.part1, 'part1:done', function() { 
      this._showPart(this._views.part2); 
     }); 
    }, 
    start: function() { 
     this._showPart(this._views.part1); 
    }, 
    _showPart: function(view) { 
     PageTest.mainRegion.show(view); 
    } 
});

应用

var PageTest = new Backbone.Marionette.Application(); 

PageTest.addRegions({ 
    mainRegion: '#main' 
}); 

var controller = new PageController(); 

controller.start();

来源

2013-10-25 siddhartha

我的经验为视图的规则是，它仍然非常愚蠢的。

通常这里是我的方法：

创建视图控制器
听在我看来，与listenTo
某些事件，一个DOM事件发生
我的处理方法只触发和事件直到具有必要数据的控制器（在视图中聚集的数据是我将拥有的最多逻辑）
控制器[R听触发的事件，然后处理更多激烈的商业逻辑（节能模式，获取等）

我们的目标是能够改变任何视图结构或控制方法不依赖于彼此。它们仅通过触发器中视图传递的数据松散耦合。

来源

2013-10-25 14:50:16

那么，你基本上会产生像我上面的例子代码呢？ – siddhartha

视图实际上应该做什么？

回答

相关问题