2013-07-29 31 views
1

我在mvc4中使用require js。要求js不能與knockout一起工作

查看

<script data-main="/scripts/about" src="/scripts/require.js" ></script> 
<article> 
<p> 
    Use this area to provide additional information. 
</p> 
</article> 

about.js

require.config({ 

    paths: { 
     page1: '/Scripts/page1', 
     page2: '/Scripts/page2', 
     knockout : '/Scripts/knockout-2.2.0' 
     } 

    }); 

    require(['page1', 'page2','knockout'], function (page1, page2) { 

    var car = new page1.Car(); 
     car.speed(60); 

     var cycle = new page2.Cycle(); 
     cycle.speed(20); 



     console.log(car.speed()); 
    console.log(cycle.speed()); 
    }); 

page1.js

define(function(){ 

    function Car() { 

    var self = this; 
    self.speed = ko.observable(); 

    } 

    }); 

PA GE2

define(function() { 

    function Cycle() { 

    var self = this; 
    self.speed = ko.observable(); 

    } 

    }); 

在控制檯它說Car是不確定的。

更新

define(['knockout'],function(ko){ 

    function Car() { 

    var self = this; 
    self.speed = ko.observable(); 
    return { 
     speed: self.speed() // But don't forget to declare it in the returned object! 
     }; 
    } 

    }); 

我提前做了這兩個1和Page 2

感謝

回答

1

AFAIK requirejs隔離加載庫到單個文件。在你的頁面1和頁面2中沒有加載淘汰賽,因此ko名稱空間沒有定義,所以ko.observables沒有定義,當你創建新車時,它將是未定義的。爲了解決這個問題,你應該在第1頁加載淘汰賽也PAGE2提供ko命名空間功能參數:

define(['knockout'], function(ko){ 

    function Car() { 

    var self = this; 
    self.speed = ko.observable(); 

    } 

}); 

或使用ko = require('knockout');或加載一個墊片淘汰賽是一個全局命名空間

編輯:

至少你試了一下。所以這裏是後續。

當你做定義時,你可以使用你提供的所有視圖模型和其他的功能。這是requirejs函數,這個函數應該返回一些東西(即你的viewModel)。這樣,您可以在定義的模塊中擁有私有和公共變量和函數。

define(['knockout'], function(ko){ 

    var Car = function() { 
    var self = this; 
    self.speed = ko.observable(); 
    } 

    return Car; 
}); 

該名稱僅適用於該模塊範圍。在你about.js當您導入模塊,你可以決定如何將其稱爲:

//load page1 script and give returned object 
//(this case a constructor) name: createCar 
require(['page1'], function (createCar) { 

    // now create new instance of your Car function: 
    var car = new createCar(); 
    car.speed(60); 

    console.log(car.speed()); 
}); 
+0

我想你說的話,但遺憾的是其同樣的錯誤。 – Ancient

+2

也你的模塊應該返回的東西,閱讀有關定義模塊:http://requirejs.org/docs/api.html#funcmodule –

+0

看到我的更新,我試過了,但仍然沒有工作 – Ancient

0

你的模塊需要return他們所代表的代碼。例如,您的Car模塊應該是這樣的:

define(function(){  
    function Car() { 
     var self = this; 
     self.speed = ko.observable(); 
    };  
    return Car; 
}); 

該模塊具有當它做代表的東西,無論是一個函數(構造對象),或對象(代表一個單例)。一旦你的模塊被定義,你require它在另一個模塊中使用它。

define(['pathtoCar/relativeToDataMainAttribute/fromRequireScriptTag'], 
function(Car){ 
    var ferrari = new Car(); 
    ... 
}); 
0

你可以試試這個

define(function() { 

     function Cycle() { 

     var self = this; 
     self.speed = ko.observable(); 

     } 

    ///////////////////ADDD THISSSS NEWWWW LINEEEE////////// 

    return new cycle(); 

    }); 
相關問題