使用 Knockout.js / RequireJs 将 javascript “类”或“模块”与视图模型分离
Separating javascript "classes" or "modules" from View Model with Knockout.js / RequireJs
我有一个使用 Knockout 开发的应用程序,我正在使用 RequireJs,我试图做的是让某些代码可用于许多不同的页面,而不必将代码放在多个文件中......像这样的事情:
function perPageOption(value, display) {
this.value = value;
this.display = display;
}
我的页面中有:
<script data-main="/Scripts/JournalEntriesDetailPage" src="~/Scripts/require.js"></script>
和脚本(JournalEntryriesDetailPage):
require(['Knockout', 'journalEntiresDetailViewModel', './app/JournalModels', 'domReady'], function (ko, viewModel) {
ko.applyBindings(new viewModel());
});
然后在我的"journalEntiresDetailViewModel"中,我有这个:
//per page options
self.perPageOptions = [new perPageOption(10, 10), new perPageOption(20, 20), new perPageOption(50, 50), new perPageOption(100, 100)];
"./app/JournalModels"是数组/类所在的位置,当我尝试在我尝试将它们"导入"到的任何页面中使用它们时,它们会出现"未定义"。我很难弄清楚这一点。我已经查看了 requirejs 上多页面应用程序的示例,它们对于我想要做的事情来说似乎太复杂了。我不明白为什么"domready"在我"需要"它时起作用,但我的文件不起作用。
我也尝试过这个没有成功:
define(['Knockout'], function (ko) {
define('EntryType', function () {
function EntryType(data) {
this.id = ko.observable(data.ID);
this.name = ko.observable(data.Name);
this.color = ko.observable(data.Color);
this.journaltypeid = ko.observable(data.JournalTypeID);
}
return new EntryType();
});
});
和
define('EntryType', function () {
return function EntryType(data) {
this.id = ko.observable(data.ID);
this.name = ko.observable(data.Name);
this.color = ko.observable(data.Color);
this.journaltypeid = ko.observable(data.JournalTypeID);
}
});
和
define(['Knockout'], function (ko) {
return {
pagePerOption: function(data) {
this.value = value;
this.display = display;
},
entryType: function(data) {
this.id = ko.observable(data.ID);
this.name = ko.observable(data.Name);
this.color = ko.observable(data.Color);
this.journaltypeid = ko.observable(data.JournalTypeID);
}
}
});
好的,我以为我以前尝试过这个,但现在它正在工作:
页:
<script data-main="/Scripts/JournalEntriesDetailPage" src="~/Scripts/require.js"></script>
初始化脚本(JournalEntryriesDetailPage):
require(['Knockout', 'journalEntiresDetailViewModel', 'domReady!'], function (ko, viewModel) {
ko.applyBindings(new viewModel());
});
查看模型脚本(journalEntiresDetailViewModel):
define(['Knockout', './app/JournalModels'], function (ko, model) {
return function () {
//per page options
self.perPageOptions = [new model.perPageOption(10, 10), new model.perPageOption(20, 20), new model.perPageOption(50, 50), new model.perPageOption(100, 100)];
//tons of other code
}
});
以及"模型"脚本(JournalModels)中的定义:
define(['Knockout'], function (ko) {
function _entryType(data) {
this.id = ko.observable(data.ID);
this.name = ko.observable(data.Name);
this.color = ko.observable(data.Color);
this.journaltypeid = ko.observable(data.JournalTypeID);
}
return {
entryType: function (data) {
return new _entryType(data);
},
entry: function (data) {
this.id = ko.observable(data.ID);
this.createdby = ko.observable(data.CreatedBy);
var datey = new Date(+data.CreatedDate.match(/'d+/)[0]);
this.createddate = ko.observable(datey.toLocaleDateString() + " " + datey.toLocaleTimeString());
this.content = ko.observable(data.Content);
this.entrytype = ko.observable(new _entryType(data.EntryType));
this.entrytypename = ko.observable(data.EntryType.Name);
this.entrytypeid = ko.observable(data.EntryType.ID);
this.journalid = ko.observable(data.journalid);
},
perPageOption: function (value, display) {
this.value = ko.observable(value);
this.display = ko.observable(display);
}
}
});
我需要在模型脚本中返回数据,我认为我尝试过,但我一定没有完成其他重要部分......即:
define(['Knockout', './app/JournalModels'], function (ko, model) {...
。在视图模型脚本中,所以我可以在我的视图模型中使用"模型",例如"model.pagePerOption"。基本上,我只需要偶然找到正确的组合......因为我正在尝试一切并改变它,以至于我需要的两件事可能不是同时存在的,直到它们最终出现。
感谢您的回复... :)
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 余烬引擎未捕获错误:找不到模块余烬视图/views/select
- 角度 - 路由器仅在移动设备上.PC上的多模块视图
- 从视图调用异步加载模块函数
- BackboneJS:集合初始化在视图模块中只有一个模型
- 需要在单个页面上使用角度 js 中的单独模块的两个视图
- 如何使用角度模块在视图中识别模型对象
- 如何将数据从mongodb(使用mongodb模块)传递到nodejs视图(使用临时引擎jade)
- 从typescript模块中注册Knockout.js组件视图模型
- 如何在angular JS中配置视图和控制器模块
- Backbone.js,require.js:我如何将我的模型、视图和集合转换为require.js模块
- 只有在DurandalJS中激活了所有组合模块后,才能附加视图
- 在我的视图中使用主干加载模块的最佳方式
- 支持模块化和多视图的主干路由
- 如何显示我的角模块'视图作为MEAN.JS中的索引页
- RequireJS + Backbone:导入视图模块会与模型模块发生冲突
- kendo要求从另一个模块访问视图模型
- 如何在sugarcrm的同一窗口中打开自定义视图,如sugarcrm的leads模块中的快速撰写电子邮件视图
- 使用 Knockout.js / RequireJs 将 javascript “类”或“模块”与视图模型分离
- 具有基于视图的数据绑定上下文的模块化 Web 组件