2015-10-22 3 views
0

Я пытаюсь реализовать knockoutjs и requirejs для своего приложения asp.net mvc.requirejs define не определен

Итак, вот что у меня есть.

просмотров/Shared/_Layout.cshtml

<html> 
<body> 
    @RenderBody() 
    <script src="~/Scripts/require.js" data-main="/Scripts/app/main"></script> 
    @RenderSection("scripts", required: false) 

</body> 
<html> 

Сценарии/main.js

require.config({ 
    baseUrl: '/Scripts', 
    paths: { 
     ko: '/Scripts/knockout-3.3.0' 
    } 
}); 

Views/продукта/Index.cshtml (один из моих взглядов)

<table class="table"> 
    <thead> 
     <tr> 
      <th>Product</th> 
      <th>Price</th> 
      <th>Status</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: products"> 
     <tr> 
      <td data-bind="text: $data.product"></td> 
     </tr> 
    </tbody> 
</table> 
<script src="~/Scripts/app/product.js"></script> 
@section scripts { 
    // Some scripts here 
} 

Сценарии/приложение/product.js

define(['ko'], function (ko) { 
    var data = [ 
     { name: 'Product1' }, 
     { name: 'Product2' } 
    ]; 

    var Product = function() { 
     this.name = ko.observable() 
    }; 

    var productVm = { 
     products: ko.observableArray([]), 
     load: function() { 
      for (var i = 0; i < data.length; i++) { 
       productVm.products.push(new Product() 
         .name(data[i].name)); 
      } 
     } 
    } 

    productVm.load(); 
    ko.applyBindings(productVm); 
}); 

Только в случае, если вам нужно, чтобы увидеть мою структуру папок

Solution 
- Scripts 
-- app 
--- product.js 
-- require.js 
-- knockout-3.3.0.js 
- Views 
-- Product 
--- Index.cshtml 
-- Shared 
--- _Layout.cshtml 

Затем, когда я перейти к моей странице индекса продуктов. Я получил ошибку define is not define. Что мне не хватает?

ответ

5

Включить следующее в вашем main.js

require(["app/product"], function() { 

}); 

И изменить index.html следующим

<table class="table"> 
    <thead> 
     <tr> 
      <th>Product</th> 
      <th>Price</th> 
      <th>Status</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: products"> 
     <tr> 
      <td data-bind="text: $data.name"></td> 
     </tr> 
    </tbody> 
</table> 
@section scripts { 

} 

Если вы собираетесь использовать RequireJS для мульти приложения страницы, а затем также прочитать this.

+0

Ничего себе. Сейчас он работает. Итак, ваше высказывание, если у меня много 'define()' модулей. Мне нужно включить его в 'main.js' один за другим? Но как бы 'product.js' знал, к какому файлу html будут применяться привязки? –

+0

@BoyPasmo для использования require.js для многостраничного приложения, прочитайте [this] (http://stackoverflow.com/questions/10815454/how-does-requirejs-work-with-multiple-pages-and-partial-views) ответ. Вы должны внести некоторые изменения в свой файл '_layout.cshtml'. – Dandy

Смежные вопросы