0

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 行目に、「オブジェクト [オブジェクト オブジェクト] にはメソッド 'input' がありません」と報告されます。

私の構成アプローチはそもそも壊れていると思います - menu.js と text_field.js ファイルを追加しました bc エラーが発生しました 'Backbone.UI.Menu' と Backbone.UI.TextField' (メニューの要件)定義されています。しかし、backbone-ui のさまざまなファイルを取り込むためのよりクリーンな方法が必要です。

では、「メソッド入力なし」エラーを取り除くにはどうすればよいですか? または、バックボーン 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/ビュー/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 が変更されます。したがって、ビューがロードされる前に実行する必要があると考えました。

于 2013-09-11T20:50:02.983 に答える