为主干ui配置require.js

Question

我正在尝试使用主干ui库，但无法找到加载模块所需的.js配置。

main.js:

 requirejs.config({
  baseUrl: '/static/js/facebook_report_app/js',
  paths: {
      backbone: 'lib/backbone'
    , underscore: 'lib/underscore'
    , jquery: 'lib/jquery'
    , laconic: 'lib/laconic'
    , moment: 'lib/moment'
    , backboneUI: 'lib/backbone-ui/js/backbone_ui'
    , menuUI: 'lib/backbone-ui/js/menu'
    , textUI: 'lib/backbone-ui/js/text_field'
    , text: 'lib/text'
  },
  shim: {
    'lib/underscore': {
      exports: '_'
    },
    'laconic': {
        deps: ["jquery"],
        exports: "$.el"
    },
    'lib/backbone': {
      deps: ['lib/underscore']
    , exports: 'Backbone'
    },
    'backboneUI': {
      deps: ['lib/backbone', 'laconic', 'jquery']
    , exports: 'Backbone.UI'
    },
    'textUI': {
      deps: ['jquery', 'lib/backbone', 'backboneUI', 'laconic']
    , exports: 'Backbone.UI.TextField'
    },
    'menuUI': {
      deps: ['lib/backbone', 'backboneUI', 'laconic', 'textUI']
    , exports: 'Backbone.UI.Menu'
    },
    'lib/backgrid': {
      deps: ['lib/underscore', 'lib/backbone']
    , exports: 'Backgrid'
    },
    'report_app': {
      deps: ['lib/underscore', 'lib/backbone', 'lib/backgrid', 'backboneUI']
    }
  }
});
require([
  'facebook_report_app'
],
function(FacebookReportApp) {
  window.fbReport = new FacebookReportApp();
});

menu_user.js

define(['jquery', 'lib/backbone', 'backboneUI', 'menuUI', 'laconic'], function(AccountPickerView) {
  var AccountPickerView = Backbone.UI.Menu.extend({
    el: '.left-nav',
  });    
  return AccountPickerView;
});

当我在dev中加载它时，控制台在Backbone UI库的text_field.js的第44行报告"Object[Object Object]没有方法'input'"。

我想我的配置方法一开始就被破坏了——我添加了menu.js和text_field.js文件，因为我收到了错误"Backbone.UI.menu"one_answers"Backbone.UI.TextField"（menu的要求）没有定义。但是必须有一种更干净的方法来引入主干ui的各种文件。

那么，我该如何摆脱"无方法输入"的错误呢？或者更好地配置为使用Backbone UI？或者我应该首先使用jQuery UI？在这种情况下，我该去哪里了解它的配置？

Answer 1

经过多次修改后，我使其正常工作：

js/main.js

requirejs.config({
    baseURL: 'js',
    urlArgs: "bust=" + (new Date()).getTime(),
    shim: {
        underscore: {
            exports: '_'
        },
        jquery: {
            exports: '$'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        laconic: {
            exports: '$.el'
        },
        backbone_ui: { 
            deps: ['underscore', 'jquery', 'backbone', 'laconic', 'moment'],
            exports: 'Backbone.UI'
        }
    },
    paths: {
        jquery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
        moment: './lib/moment.min',
        laconic: './lib/laconic',
        underscore: 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min',
        backbone: 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min',
        backbone_ui: './lib/backbone-ui',
        crypto: 'http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5',
        templates: '../templates',
        collections: './collections',
        models: './models',
        }
    });

js/views/json.js

define(['jquery','underscore', 'backbone', 'backbone_ui'],
function($,_,Backbone, BBUI){
    var JsonView = Backbone.View.extend({
      className: "json-item",
      initialize: function(data){
          var self = this;
          this.app = data.app;
          this.model = data.model;
          this.listenTo(this.model, "change", function(){
            console.log("model changed", self.model);
          });
          this.model.fetch({
              success: function(){
                  self.render();
              }
          });
      },
      render: function(){
            var self = this;
            $(this.el).empty();
            for (key in this.model.attributes){
              this.el.appendChild(new Backbone.UI.Label({content:key}).render().el);
              this.el.appendChild(new Backbone.UI.TextField({model: this.model, content:key}).render().el);
            }
            this.el.appendChild(new Backbone.UI.Button({content:"save", onClick: function(){self.model.save()}}).render().el);
            return this;
          }
    });
    return JsonView;
});

请注意，我将主干ui导入为BBUI，并且从不以这种方式引用它BBUI.TextField（）是一个已定义的函数，使用它也可以，但Backbone ui的设置方式在加载时会对Backbone、Jquery和Undercore进行更改。所以我想我只需要在加载视图之前运行它。