2

所以这不是一个具体的问题，而是一个关于最佳实践的问题，我猜。我只是跳到 Backbone 和 Marionette 中，阅读了十几篇文章和教程，我的脑袋正在游动。每个人的做事似乎都有点不同，没有一个人非常深入，遗漏了很多细节。我在网上找到了一个 Marionette jsFiddle ( http://jsfiddle.net/tonicboy/5dMjD/ )，它为视图提供了一个静态模型，我设法破解它以从 REST api (Foursquare 公共 API - http:// bit.ly/1cy3MZe )

然而，它似乎与 Marionette 的“少样板”承诺不符。事实上，我知道我在做各种各样的骇人听闻的事情，我只是不知道是什么，我的脑袋会爆炸的。

如果您不想查看 Fiddle，请使用以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>MarionetteJS (Backbone.Marionette) Playground - jsFiddle demo by tonicboy</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
      <script type='text/javascript' src="http://underscorejs.org/underscore.js"></script>
      <script type='text/javascript' src="http://backbonejs.org/backbone.js"></script>
      <script type='text/javascript' src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
  <style type='text/css'>
    #main span {
    background-color:#ffc;
    font-weight: bold;
}
  </style>
<script type='text/javascript'>//<![CDATA[
$(function(){
// Define the app and a region to show content
// -------------------------------------------
var App = new Marionette.Application();
App.addRegions({
    "mainRegion": "#main"
});
// Create a module to contain some functionality
// ---------------------------------------------
App.module("SampleModule", function (Mod, App, Backbone, Marionette, $, _) {
    // Define a view to show
    // ---------------------
    var MainView = Marionette.ItemView.extend({
        template: "#sample-template"
    });
    // Define a controller to run this module
    // --------------------------------------
    var Controller = Marionette.Controller.extend({
        initialize: function (options) {
            this.region = options.region
        },
        show: function () {
            var Book = Backbone.Model.extend({
                url: 'https://api.foursquare.com/v2/venues/4afc4d3bf964a520512122e3?oauth_token=EWTYUCTSZDBOVTYZQ3Z01E54HMDYEPZMWOC0AKLVFRBIEXV4&v=20130808',
                toJSON: function () {
                    return _.clone(this.attributes.response);
                }
            })
            myBook = new Book();
            myBook.bind('change', function (model, response) {
                var view = new MainView({
                    el: $("#main"),
                    model: model
                });
                this.region.attachView(view);
                this.region.show(view);
            }, this);
            myBook.fetch();
        }
    });
    // Initialize this module when the app starts
    // ------------------------------------------
    Mod.addInitializer(function () {
        Mod.controller = new Controller({
            region: App.mainRegion
        });
        Mod.controller.show();
    });
});
// Start the app
// -------------
App.start();
});//]]>
</script>
</head>
<body>
  <header>
     <h1>A Marionette Playground</h1>
</header>
<article id="main"></article>
<script type="text/html" id="sample-template">
    put some <span><%= venue.name %></span> here.
</script>
</body>
</html>
4

1 回答 1

0

我没有做太多的工作Backbone Marionette，但是你第一次遵循的一般方法是相当好的。

我还对代码做了一些小改动。因为模型只能在控制器范围之外定义一次，因为它更有意义。您甚至可以在其他视图中使用相同的模型。因此，模型定义最好在整个范围内都可用。还在将模型传递给控制器​​之前创建模型的新实例。检查代码。

再说一次，我对木偶不太熟悉，我能想到这些是我的头顶。

// Define the app and a region to show content
// -------------------------------------------

var App = new Marionette.Application();

App.addRegions({
    "mainRegion": "#main"
});

// Create a module to contain some functionality
// ---------------------------------------------

App.module("SampleModule", function (Mod, App, Backbone, Marionette, $, _) {

    // Define a view to show
    // ---------------------

    var MainView = Marionette.ItemView.extend({
        template: "#sample-template"
    });

    // Move this to outside the Controller
    // as this gives access to other Views
    // Otherwise you would have to declare a New Model inside every controller
    var Book = Backbone.Model.extend({
        url: 'https://api.foursquare.com/v2/venues/4afc4d3bf964a520512122e3?oauth_token=EWTYUCTSZDBOVTYZQ3Z01E54HMDYEPZMWOC0AKLVFRBIEXV4&v=20130808',
        toJSON: function () {
            return _.clone(this.attributes.response);
        }
    })

 // Define a controller to run this module
    // --------------------------------------
    var Controller = Marionette.Controller.extend({

        initialize: function (options) {
            this.region = options.region;
            this.model = options.model;
            // Listen to the change event and trigger the method
            // I would prefer this as this is a cleaner way of binding and
            // handling events
            this.listenTo(this.model, 'change', this.renderRegion);
        },
        show: function () {
            this.model.fetch();
        },
        renderRegion: function () {
            var view = new MainView({
                el: $("#main"),
                model: this.model
            });
            this.region.attachView(view);
            this.region.show(view);
        }
    });


    // Initialize this module when the app starts
    // ------------------------------------------

    Mod.addInitializer(function () {
        // I would create the model here and pass it to the controller
        var myBook = new Book();
        Mod.controller = new Controller({
            region: App.mainRegion,
            model: myBook
        });
        Mod.controller.show();
    });
});

// Start the app
// -------------

App.start();

检查小提琴

于 2013-08-08T20:37:53.833 回答