Jak złamać model knockout view w częściach za pomocą requirejs
Obecnie pracuję nad aplikacją, która powiększa się ze względu na tak dużą funkcjonalność. Tutaj przedstawię przykładowy kod, aby zrozumieć.
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 */
}
requirejs. Tego właśnie próbowałem.
The Structure
app/
js/
/Collections/ /* For ObservableArrays */
/Events/ /* For Collections and Models */
/Helpers/ /* For Collections and Models */
/Models/ /* Default Properties */
Obecnie to, czego chcę jest teraz rozbić model na 3 do 4 części.
- Kolekcja.js gdzie definiuję tylko
observableArray() - wydarzenia.js, gdzie chcę zdefiniować funkcje związane z serwerem Pomocnicy.js, gdzie chcę zdefiniować funkcje, aby wykonać jakąś wewnętrzną pracę.
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()
});
TaskList w wydarzeniach.js i pomocnik.js jest nieokreślone. Wiem, że muszę podać listę Zadań jako parametr, ale nie chcę użyj sposobu funkcji. Zamiast tego chcę użyć dosłownego sposobu, aby połączyć te dwa pliki w Tasklist.js viewmodel.
Jak mogę to zrobić? 2 answers
Myślę, że to jest przykład tego, co możesz zrobić (to jest przykład, w prawdziwym życiu można podzielić na oddzielne pliki js):
Zdefiniuj ko jako moduł (nie tak przydatny jak jest, możesz usunąć odniesienie do "knockout")
define("knockout", function () {
return ko;
});
Zdefiniuj Moduł Dla listy zadań
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();
});
Zdefiniuj moduł dla zdarzeń i odwołaj się do listy zadań
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();
});
Zdefiniuj moduł dla pomocników, który również odwołuje się do listy zadań
define("Helpers", ["knockout","TaskList"],function (ko, obj) {
var helpers = function() {
var self = this;
self.SortTaskList = function (data) {
obj.TaskList.sort();
}
}
return new helpers();
});
Zdefiniuj główny moduł, który będzie umieszczał wszystkie moduły razem
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();
});
Na koniec wywołaj główny moduł i spróbuj dodać element do listy zadań za pomocą modułu zdarzeń
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);
});
Zaktualizowane Demo
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-02 07:49:10
Jedną rzeczą do rozważenia tutaj jest to, że wymagają.js nie chce tylko, aby Moduły w jednym pliku JavaScript, chce, aby rozbić Moduły na osobne Pliki, aby utrzymać moduły z coraz większych rozmiarów. Problem polega na tym, że nie masz obecnie możliwości nazwania swoich modułów, aby inni o nich wiedzieli. Rozważ to -
Tasklist.js
define(["knockout"],function (ko) {
function test() {
var self = this;
self.TaskList = ko.observableArray();
};
return new test();
});
Wydarzenia.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();
});
define(["knockout","app/TaskList"],function (ko,TaskList) {
var helpers = function() {
var self = this;
self.SortTaskList = function (data) {
TaskList.sort();
};
}
return new helpers();
});
Oczywiście zakłada to, że masz już główną.js lub jakiś punkt wejścia z wymaganiem.konfiguracja js ustawiona tak, aby wymagało znać Gdzie , aby znaleźć pliki. Jeśli nie masz, to wygląda to mniej więcej tak -
Main.js
requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app'
}
});
Który zakłada, że masz coś podobnego do tego dla swojej struktury plików -
(Projekt dir)
/ app /
Main.js
Wydarzenia.js
Lista zadań.js
Pomocnicy.js
Teraz, gdy załadujesz wymagaj.js w Twoim plik html i wskaż main.js jako punkt wejścia wszystkie Twoje moduły zostaną załadowane.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-05 05:36:03