2

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

我的直觉告诉我，模型保存数据，视图触发事件，控制器监听并处理这些事件。我努力让视图尽可能多地保留逻辑，这听起来可能很奇怪。

例如，我创建了一个JSFiddle.listenTo ，它只是在控制器中使用一个视图切换到另一个视图。我本可以使用布局并切换区域，但我希望代码尽可能小。

我在正确的轨道上吗？视图是否应该只呈现一个界面并喊出事件而不在视图代码中对它们中的任何一个进行操作？这个逻辑应该在 Controller 中还是偏离了精益控制器的原则？

谢谢。

下面是详细代码：

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

1 回答 1

1

我对视图的经验法则是让它保持相当愚蠢。

通常这是我的方法：

  1. 在控制器中创建视图
  2. 用 listenTo 监听某些事件
  3. 在我看来，发生了一个 DOM 事件
  4. 我的处理程序方法仅使用必要的数据触发和事件到控制器（视图中收集的数据是我将拥有的最逻辑）
  5. 监听触发事件的控制器然后处理更密集的业务逻辑（模型保存、获取等）

目标是能够更改视图结构或控制器方法，而无需相互依赖。它们仅通过从触发器中的视图向上传递的数据松散耦合。

于 2013-10-25T14:50:16.390 回答