Question

我正在尝试使用backbone-ui库，但无法找出require.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行。

我想我的配置方法一开始就被打破了 - 我添加了menu.js和text_field.js文件bc我收到了错误'Backbone.UI.Menu'和Backbone.UI.TextField'（菜单的要求））没有定义。但必须有一种更清晰的方式来引入backbone-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 /视图/ 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;
});

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

为backbone-ui配置require.js.

1 个答案: