如何重新定义对象并传达对象? [英] How to redefine object and communicate object?
问题描述
我遇到了一些问题，我知道var app = app || {}意味着创建变量 app 是空对象，然后通过重新定义活动使用 app .
I faced some problems, I know var app = app || {} means creating variable app is empty object then app is used through redefining activity.
但是我不明白如何像上述方法那样在主干中使用空对象.
But i don't understand how to use the empty object in backbone like above method.
Router.js
var app = app || {};
(function() {
'use strict';
var views = app.view = app.view || {};
app.Router = Backbone.Router.extend({
routes: {
'list/:id': 'listRoute',
'situation': 'situationRoute',
'culture': 'cultureRoute',
'level': 'livingwordsRoute',
//wildcard place on last.
'*home': 'homeRoute'
},
_bindRoutes: function() {
if (!this.routes) return;
this.routes = _.result(this, 'routes');
var route, routes = _.keys(this.routes);
while ((route = routes.pop()) != null) {
this.route(route, this.routes[route]);
}
},
initialize: function() {
// create the layout once here
this.layout = new views.Application({
el: 'body',
});
},
homeRoute: function() {
var view = new views.Home();
var target = 'home';
this.layout.setContent(view, target);
},
situationRoute: function() {
var view = new views.Situation();
var target = 'situation';
this.layout.setContent(view, target);
},
listRoute: function(id) {
switch (id) {
case 1:
var list = new app.collection([
{
id : "1",
url : "/assets/videos/call/MOV01718.mp4",
imgSrc : "assets/img/call/1_thumbnail.png",
title: "call situation conservation"
},
{
id : "2",
url : "/assets/videos/call/MOV01722.mp4",
imgSrc : "assets/img/call/2_thumbnail.png",
title: "call situation conservation"
}
]);
break;
default:
var list = new app.collection([
{
id : "1",
url : "/assets/videos/call/MOV01718.mp4",
imgSrc : "assets/img/call/1_thumbnail.png",
title: "call situation conservation"
},
{
id : "2",
url : "/assets/videos/call/MOV01722.mp4",
imgSrc : "assets/img/call/2_thumbnail.png",
title: "call situation conservation"
}
]);
}
var view = new views.list();
var target = 'list';
this.layout.setContent(view, target);
},
cultureRoute: function(){
var view = new views.Culture();
var target = 'culture';
this.layout.setContent(view, target);
},
livingwordsRoute: function(){
var view = new views.Level();
var target = 'livingwords';
this.layout.setContent(view, target);
}
});
var router = new app.Router();
Backbone.history.start();
})();
VideoList.js
var app = app || {};
(function() {
'use strict';
var models = app.model = app.model || {};
var collections = app.collection = app.collection || {};
models.Video = Backbone.Model.extend({
initialize: function(){
console.log('model create');
},
defaults:{
id : "1",
url : "/assets/videos/call/MOV01718.mp4",
imgSrc : "assets/img/call/1_thumbnail.png",
title: "call situation conservation"
}
});
collections.VideoLists = Backbone.Collection.extend({
model: models.Video
});
var lists = new collections.VideoLists([
{
id : "1",
url : "/assets/videos/call/MOV01718.mp4",
imgSrc : "assets/img/call/1_thumbnail.png",
title: "call situation conservation"
},
{
id : "2",
url : "/assets/videos/call/MOV01722.mp4",
imgSrc : "assets/img/call/2_thumbnail.png",
title: "call situation conservation"
}
]);
console.log(lists);
})();
view.js
var app = app || {};
(function() {
'use strict';
//views linitalize
var views = app.view = app.view || {};
views.Application = Backbone.View.extend({
initialize: function() {
this.$content = this.$('#main');
//this.$loading = this.$('#loading');
},
setContent: function(view, target) {
var content = this.content;
var subUrl = this.target;
if (content) content.remove();
content = this.content = view;
subUrl = this.target = target;
var templateName = subUrl;
var tmpl_dir = '../assets/static';
var tmpl_url = tmpl_dir + '/' + templateName + '.html';
var tmpl_string = '';
$.ajax({
url: tmpl_url,
method: 'GET',
async: false,
dataType : 'html',
success: function (data) {
tmpl_string = data;
}
});
this.$content.html(content.render(tmpl_string).el);
}
});
views.Home = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
//how to get return result? in parent object?
});
views.Situation = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
views.list = Backbone.View.extend({
initialize: function(){
this.collection = new app.collection();
},
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
views.Culture = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
views.Level = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
})();
list.html
<script type="text/template" id="list-template">
<div class="content">
<a href="<%= list.url %>"></a>
<figure id="<%= list.id %>">
<img src="<%= list.imgSrc %>" alt="">
<figcaption><%= list.title%></figcaption>
</figure>
</div>
</script>
这是我的消息来源.
我想在Router和View之间进行通信，因为我不明白为什么要指明
i want to communicate between Router and View because i don't understand why indicate
app.collcetion不是构造函数
app.collcetion is not constructor
然后，我在videolist.js
and then, i tested in the videolist.js
var lists = new collections.VideoLists([
{
id : "1",
url : "/assets/videos/call/MOV01718.mp4",
imgSrc : "assets/img/call/1_thumbnail.png",
title: "call situation conservation"
},
{
id : "2",
url : "/assets/videos/call/MOV01722.mp4",
imgSrc : "assets/img/call/2_thumbnail.png",
title: "call situation conservation"
}
]);
很棒. (在videoList.js中) 请参见下面的屏幕截图.
is great generated. (in the videoList.js) see the below screentshot.
我想知道如何重构重复的代码.
and i want to know how to refactor repeated code.
请参考我下面的资料
router.js
please refer to my below source
router.js
views.Home = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
//how to get return result? in parent object?
});
views.Situation = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
views.list = Backbone.View.extend({
initialize: function(){
this.collection = new app.collection();
},
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
views.Culture = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
views.Level = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
view.js
views.Home = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
views.Situation = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
我不想重复相同的对象和来源.
I don't want to repeat same object and source.
如何更改它们?
推荐答案
var app = app || {};技术只是一种命名空间模式，可以避免污染全局名称空间.
The var app = app || {}; technique is just a namespacing pattern to avoid polluting the global namespace.
创建一个名为app的全局变量，然后将应用程序的代码添加到其中.将应用拆分为多个文件时，您希望能够使用app变量(如果先前已定义).
A single global variable named app is created, then the code for the app is added to it. When splitting the app in multiple files, you want to be able to use the app variable if it was defined previously.
输入app || {}技巧，如果它是真实的，则将返回app变量，如果app是虚假的(可能是undefined)，则将返回{}空对象.
Enters the app || {} trick which will return the app variable if it's truthy or the {} empty object if app is falsy (probably undefined).
尽管此技术可以对文件进行不同的排序，但如果文件需要其他组件(例如app.collection)，则应相应地对文件进行排序.
Though this technique enables different ordering of the files, if a file requires another component (like app.collection), the files should be ordered accordingly.
<script src="collections.js"></script><!-- defines app.collection -->
<script src="views.js"></script><!-- requires app.collection -->
关于重构，请首先查看如何使用_.template ，具体取决于您所使用的Underscore版本重新使用，可能无法按预期工作.
Regarding refactoring, first take a look at how to use _.template, depending on the version of Underscore you're using, it might not work as you expect.
然后，对于重复的render功能，拥有这些功能是完全正常的.它们看起来很相似，但是在开发过程中会变得很大.
Then, for the repeating render function, it's totally normal to have those. They look similar, but will become much different over the development process.
这篇关于如何重新定义对象并传达对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
