Backbonejs/Underscorejs與RequireJS - 視圖不重裝後的Jquery渲染

它使用骨幹/下劃線和RequireJS我的第一個項目。我有一個名爲主頁的「父視圖」和名爲Sidebar的子視圖。我知道父視圖加載了子模板的內容（現在是靜態內容，沒有模型），但問題是jquery和scripts.js（自制的文件對jquery函數有所有調用）沒有正確加載。看起來像jquery加載在bigining，但不重新加載或刷新主視圖時不刷新。我將展示代碼以嘗試更好地解釋它。Backbonejs/Underscorejs與RequireJS - 視圖不重裝後的Jquery渲染

的兩個文件我想加載是jQuery的和scripts.js中。 Jquery是圖書館，我認爲它加載（我不知道如何測試它）。第二個是scripts.js文件，我稱之爲jquery（.animate（...），.css（...）等的函數）。

主頁視圖（Home.js）

define(function (require) { 

    "use strict"; 

    var $ = require('jquery'), 
     Scripts = require('scripts'), 
     Backbone = require('backbone.min'), 
     tpl  = require('text!tpl/Home.html'), 
     Sidebar = require('app/views/Sidebar'), 
     template = _.template(tpl); 

    return Backbone.View.extend({ 
     el: $("body"), 
     initialize : function() { 
      this.sidebar = new Sidebar(), 
      this.on('render', this.onRender); 
     }, 
     render  : function() {   
      this.$el.html(template()); 
       return this.trigger('render'); 
     }, 
     onRender : function() { 
       this.sidebar.setElement('aside').render(); 
     } 
    }); 
});

側邊欄視圖（Sidebar.js）

define(function (require) { 

    "use strict"; 
    var $  = require('jquery'), 
     Scripts = require('scripts'), 
     _  = require('underscore.min'), 
     Backbone = require('backbone.min'), 
     tpl  = require('text!tpl/Sidebar.html'), 
     template = _.template(tpl); 

    return Backbone.View.extend({ 
     el : $("#sidebar"), 
     render: function() { 
      this.$el.html(template()); 
     } 
    }); 
});

最後，這是從我的RequireJS配置文件（應用程序代碼。 JS）。我已經把這個backbone.min依賴於jQuery，下劃線和腳本來強制視圖來加載scripts.js文件。

app.js

require.config({ 
    baseUrl: 'js/lib', 
    paths: { 
     app: '../app', 
     tpl: '../tpl' 
    }, 
    map: { 
     '*': { 
      'app/app': 'app/app' 
     } 
    }, 
    shim: { 
     'tablesorter.min'   : ['jquery.min'], 
     'tablesorter.widgets.min' : ['jquery.min', 'tablesorter.min'], 
     'scripts'     : ['jquery.min', 'tablesorter.min', 'tablesorter.widgets.min', 'json2'], 
     'backbone.min' : { 
      deps: ['underscore.min', 'jquery.min', 'scripts'], 
      exports: 'Backbone' 
     }, 
     'underscore.min': { 
      exports: '_' 
     } 
    }  
}); 

require([ 
    "jquery.min", 
    "backbone.min", 
    "app/router", 
    "scripts" 
    ], function(
     $, 
     Backbone, 
     Router, 
     Scripts 
    ){ 
     var router = new Router(); 
     Backbone.history.start(); 
});

編輯：

我已經在那裏我把意見的所有模板文件/TPL目錄。要看到我已經上傳lite version of the project

Sry基因的解釋的例子......我試圖解釋可能更好的:)

來源

2013-08-27 newpatriks

在您的html頁面上顯示您的腳本來源。他們可能只是衝突。 –

Sry @JonLaMarr，我已經在[this url]（http://jordillobet.es/versio_bb/index.html） – newpatriks

'jquery'vs'jquery.min'上載了這個項目的精簡版。 – GijsjanB

我不知道這是否是最好的解決辦法..如果有人更清楚，我會很高興知道這件事。

從根本上說，我把jQuery代碼放在一個回調函數中，該回調函數在主幹渲染事件之後調用。在開始時，我有jQuery代碼在骨幹視圖中，但之後我創建了不同的jQuery功能，這取決於調用它的骨幹視圖，所以現在我有一個包含所有jQuery功能的script.js文件。

不利的地方，這裏是我不知道我已經完成的解決方案，是我必須調用每個視圖需要jQuery的補充每個jQuery的功能。

來源

2013-10-10 07:37:03 newpatriks

Backbonejs/Underscorejs與RequireJS - 視圖不重裝後的Jquery渲染

回答

相關問題