2

したがって、これは特定の問題ではなく、ベスト プラクティスに関する質問だと思います。私はバックボーンとマリオネットに飛び込んでいるだけで、1ダースの記事とチュートリアルを読んで頭が泳いでいます. それぞれが少しずつ違うことをしているように見え、どれも非常に深く掘り下げていません。ビューに静的モデルを提供する Marionette jsFiddle オンライン ( http://jsfiddle.net/tonicboy/5dMjD/ ) を見つけ、それをハックして REST API (Foursquare public API - http:// bit.ly/1cy3MZe )

しかし、マリオネットの「ボイラープレートを少なくする」という約束には合わないようです。実際、私はあらゆる種類のハックなことをしていることを知っています。何をしているのかわからないだけで、頭が爆発しそうです。

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が、あなたがたどった一般的なアプローチは初めてかなり大丈夫でした.

また、コードにいくつかの小さな変更を加えました。モデルは、より理にかなっているため、コントローラーの範囲外で一度だけ定義できるためです。同じモデルを他のビューで使用することもできます。そのため、Model 定義がスコープ全体で利用できる方がよいでしょう。また、コントローラーに渡す前に、モデルの新しいインスタンスを作成します。コードを確認してください。

繰り返しますが、私はマリオネットにあまり精通していないので、頭のてっぺんにこれらを考えることができました.

// 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 に答える