0

我正在尝试使用主干 ui 库，但无法弄清楚 require.js 配置来加载模块。

主.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] has no method 'input'”。

我想我的配置方法一开始就被破坏了——我添加了 menu.js 和 text_field.js 文件，因为我收到了错误'Backbone.UI.Menu'和 Backbone.UI.TextField'（Menu 的要求）不是' t 定义。但是必须有一种更简洁的方式来引入backbone-ui的各种文件。

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

4

1 回答 1

0

经过大量摆弄以下设置后，我得到了它的工作：

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;
});

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

于 2013-09-11T20:50:02.983 回答