Question

我已经构建了我的第一个骨干应用程序，并且非常享受骨干提供的结构。然而，我发现自己有一些轻微的烦恼，我相信其他人已找到解决方案。

所以目前我已经创建了一个像

这样的文件结构

models
      index.js
      user.js
views
      index.js
      user.js

所以在我在视图文件夹中的'index.js'中，我目前拥有所有视图，所以我要说

headerView
footerView
buttonView

等等

所以我目前在一个与一个页面应用相关的通用“view js文件”中有多个“视图”。问题是找不到特定视图是不直观的，我打开一个编辑器并找到正确的视图。

在其他MVC中，我会将每个视图存储在其自己的唯一文件中，并在适当时使用它们 - 其他用户是否在此处执行相同操作？我想我的担心是有多个单独的js文件？我使用minify项目来缩小js，所以可以创建一个组，但想知道其他人做了什么？

Answer 1

我建议你看一下require.js。 Here是一个可以帮助您入门的教程。

核心理念是......如下。

每个模型，视图，集合，路由器，无论驻留在自己的文件中，都被称为module
在每个模块的顶部，您定义了依赖关系，这意味着需要加载哪些其他模块才能使新模块正常工作
require.js加载您的依赖项并通过自定义变量

Definiton （例如childView.js）

define([
    'jQuery',
    'Underscore',
    'Backbone'
], function($, _, Backbone){
     return Backbone.View.extend({
         //your usual view methods and properties
     });
});

重用（例如parentView.js）

define([
    'jQuery',
    'Underscore',
    'Backbone',
    'pathToChildView/childView.js'
], function($, _, Backbone, ChildView){
     return Backbone.View.extend({
         // your usual view methods and properties
         // + access to your ChildView Modul
     });
});

如果您在使用模块加载语法时遇到问题，则sugared变体可能是您的朋友。

Answer 2

将每个对象分成分层文件夹中的视图/模板对以获得更好的导航是值得的。然后，您只需在视图中构造子对象并传递el元素。这样，您可以根据需要在整个项目中重用每个对象。

存储骨干视图的最佳方式

2 个答案: