如何在有要求的部分中打破淘空视图模型
我目前正在开发一个应用程序，由于有这么多的功能，它正在扩大自己。在这里，我将介绍一些示例代码以便于理解。
function test(){
var self = this
/* Define Properties */
self.TaskSection = ko.observable()
.
.
/* Define Get Requrest */
self.GetTasks = function(){
}
.
.
/* Define Post Requrest */
self.PostTask = function(){
}
.
.
/* Define Helper Methods */
self.FormatDate = function(){
}
.
.
/* Define Navigation Methods */
self.HomePage = function(){
}
.
.
/* End */
}好的。非常简单。您可以看到示例模型，但现在很难使用它，因为每个部分都包含许多函数。让我们假设每个部分有10个以上的函数。现在，我想使用requirejs来管理应用程序。这就是我尝试过的。
The Structure
app/
js/
/Collections/ /* For ObservableArrays */
/Events/ /* For Collections and Models */
/Helpers/ /* For Collections and Models */
/Models/ /* Default Properties */目前我想要的是将模型分成3到4个部分。
在
- Collection.js中，我只定义了
observableArray() - Events.js，在这里，我想定义与服务器相关的函数，在
- Helpers.js中，我想定义函数来做一些内部工作。
我如何才能做到这一点。这就是我尝试过的。
define(["knockout"],function (ko) {
function test(){
var self = this
self.TaskList = ko.observanleArray()
}
return new test()
});
define(["knockout","TaskList"],function (ko,TaskList) {
var events = function() {
var self = this
self.AddItem = function (data) {
TaskList.push(TaskModel)
}
self.RemoveItem = function (data) {
TaskList.remove(data)
}
}
return new events()
});
define(["knockout","TaskList"],function (ko,TaskList) {
var helpers = function() {
var self = this
self.SortTaskList = function (data) {
TaskList.sort()
}
}
return new helpers()
});在这里，我不知道如何合并它们。events.js和helper.js中的TaskList未定义。我知道我需要将TaskList作为参数传递，但我不想使用函数的方式。相反，我想使用文字方式将这两个文件合并到Tasklist.js视图模型中。
我该怎么做呢？
回答 2
Stack Overflow用户
发布于 2014-06-30 22:50:36
我认为这是一个你可以做的例子(这是一个例子，在现实生活中，你会分割成单独的js文件)：
将ko定义为一个模块(虽然它不是很有用，但您可以删除对“knockout”的引用)
define("knockout", function () {
return ko;
});为TaskList定义一个模块
define("TaskList", ["knockout"],function (ko) {
function TaskList(){
var self = this;
self.NameInput = ko.observable("");
self.DescInput = ko.observable("");
self.TaskList = ko.observableArray();
}
return new TaskList();
});为事件定义一个模块并引用TaskList
define("Events", ["knockout","TaskList"],function (ko, obj) {
var events = function() {
var self = this;
self.AddItem = function (data) {
var inputData;
if (typeof(data.Name) === 'undefined') {
inputData = { Name: obj.NameInput(),
Description: obj.DescInput() };
} else
inputData = data;
obj.TaskList.push(inputData);
}
self.RemoveItem = function (data) {
obj.TaskList.remove(data);
}
}
return new events();
});为也引用TaskList的帮助器定义一个模块
define("Helpers", ["knockout","TaskList"],function (ko, obj) {
var helpers = function() {
var self = this;
self.SortTaskList = function (data) {
obj.TaskList.sort();
}
}
return new helpers();
});定义一个将所有模块放在一起的主模块
define("Main", ["knockout","TaskList", "Events", "Helpers"],
function (ko, obj, e, h) {
var main = function() {
var self = this;
self.Tasks = obj;
self.Events = e;
self.Helpers = h;
}
return new main();
});最后，调用main模块并尝试通过Events模块将项目添加到TaskList
require(["Main", "knockout"], function (main, ko) {
main.Events.AddItem({ Name: "My first task", Description: "Start the job"});
main.Events.AddItem({ Name:"My second task", Description:"Continue the job"});
main.Events.AddItem({ Name: "My last task", Description: "Finish the job"});
ko.applyBindings(main);
console.log(main.Tasks.TaskList().length);
});Stack Overflow用户
发布于 2014-06-26 22:09:30
这里要考虑的一件事是，require.js不仅希望您在单个JavaScript文件中创建模块，它还希望您将模块拆分到单独的文件中，以防止模块变得过大。你遇到的问题是，你目前没有任何方法来命名你的模块，以便其他人知道它们。考虑一下这个-
Tasklist.js
define(["knockout"],function (ko) {
function test() {
var self = this;
self.TaskList = ko.observableArray();
};
return new test();
});Events.js
define(["knockout","app/TaskList"],function (ko,TaskList) {
var events = function() {
var self = this;
self.AddItem = function (data) {
TaskList.push(TaskModel);
};
self.RemoveItem = function (data) {
TaskList.remove(data);
};
}
return new events();
});Helpers.js
define(["knockout","app/TaskList"],function (ko,TaskList) {
var helpers = function() {
var self = this;
self.SortTaskList = function (data) {
TaskList.sort();
};
}
return new helpers();
});当然，这假设您已经有了一个main.js或一些设置了require.js配置的入口点，以便让require知道在哪里可以找到这些文件。如果你没有它，它会是这样的-
Main.js
requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app'
}
});假设你的文件结构有类似的东西-
(项目目录)
/app/
Main.js
Events.js
TaskList.js
Helpers.js
现在，当您在html文件中加载require.js并指向main.js作为入口点时，所有模块都将被加载。
https://stackoverflow.com/questions/24281426
复制相似问题