这个从REST获取的主干网Marionette代码似乎错了。
这个从REST获取的主干网Marionette代码似乎错了。
提问于 2013-08-08 19:53:38
所以我想，这不是一个具体的问题，而是一个关于最佳实践的问题。我只是跳到脊梁和Marionette和我的头游泳从读了十几篇文章和教程。每个人做的事情似乎有点不同，没有一个是非常深入的，遗漏了很多细节。我找到了一个Marionette jsFiddle online (http://jsfiddle.net/tonicboy/5dMjD/)，它为视图提供了一个静态模型，我设法破解了它，从REST (Foursquare public 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>回答 1
Stack Overflow用户
发布于 2013-08-08 20:37:53
我对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();检查Fiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18134893
复制相关文章
相似问题
腾讯云开发者
