Boy*_*smo 0 javascript asp.net-mvc requirejs knockout.js
我正在尝试将knockoutjs和requirejs应用到我的asp.net mvc应用程序中.
所以,这就是我所拥有的.
查看/共享/ _Layout.cshtml
<html>
<body>
@RenderBody()
<script src="~/Scripts/require.js" data-main="/Scripts/app/main"></script>
@RenderSection("scripts", required: false)
</body>
<html>
Run Code Online (Sandbox Code Playgroud)
脚本/ main.js
require.config({
baseUrl: '/Scripts',
paths: {
ko: '/Scripts/knockout-3.3.0'
}
});
Run Code Online (Sandbox Code Playgroud)
Views/Product/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
}
Run Code Online (Sandbox Code Playgroud)
脚本/应用/ 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);
});
Run Code Online (Sandbox Code Playgroud)
以防您需要查看我的文件夹结构
Solution
- Scripts
-- app
--- product.js
-- require.js
-- knockout-3.3.0.js
- Views
-- Product
--- Index.cshtml
-- Shared
--- _Layout.cshtml
Run Code Online (Sandbox Code Playgroud)
然后,一旦我导航到我的产品索引页面.我收到了一个define is not define错误.我错过了什么?
包括以下内容 main.js
require(["app/product"], function () {
});
Run Code Online (Sandbox Code Playgroud)
并修改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 {
}
Run Code Online (Sandbox Code Playgroud)
如果您打算将RequireJS用于多页面应用程序,那么也请阅读此内容.
| 归档时间: |
|
| 查看次数: |
10622 次 |
| 最近记录: |