1

私は現在、KnockOutJSを学習しようとしています。簡単なタスクリストアプリケーションを作成するのは素晴らしいアイデアだと思いました。ここに長いテキストを書きたくないので、私の問題に飛び込みましょう。私はあらゆる種類の助けに感謝します-私はKnockOutJSthoに不慣れです！

タスクは次のように宣言されます。

var Task = function (data) {
    var self = this;

    self.name = ko.observable(data.name);
    self.status = ko.observable(data.status);
    self.priority = ko.observable(data.priority);
}

そして、ビューモデルは次のようになります

var TaskListViewModel = function() {
var self = this;

self.currentTask = ko.observable();
self.currentTask(new Task({ name: "", status: false, priority: new Priority({ name: "", value: 0 }) }));

self.tasksArr = ko.observableArray();

self.tasks = ko.computed(function () {
    return self.tasksArr.slice().sort(self.sortTasks);
}, self);

self.sortTasks = function (l, r) {
    if (l.status() != r.status()) {
        if (l.status()) return 1;
        else return -1;
    }

    return (l.priority().value > r.priority().value) ? 1 : -1;
};

self.priorities = [
    new Priority({ name: "Low", value: 3 }),
    new Priority({ name: "Medium", value: 2 }),
    new Priority({ name: "High", value: 1 })
];

// Adds a task to the list
// also saves updated task list to localstorage
self.addTask = function () {
    self.tasksArr.push(new Task({ name: self.currentTask().name(), status: false, priority: self.currentTask().priority() }));
    self.localStorageSave();

    self.currentTask().name("");
};

// Removes a task to a list
// also saves updated task list to localstorage
self.removeTask = function (task) {
    self.tasksArr.remove(task);
    self.localStorageSave();
};

// Simple test function to check if event is fired.
self.testFunction = function (task) {
    console.log("Test function called");
};

// Saves all tasks to localStorage
self.localStorageSave = function () {
    localStorage.setItem("romaTasks", ko.toJSON(self.tasksArr));
};

// loads saved data from localstorage and parses them correctly.
self.localStorageLoad = function () {
    var parsed = JSON.parse(localStorage.getItem("romaTasks"));
    if (parsed != null) {
        var tTask = null;
        for (var i = 0; i < parsed.length; i++) {
            tTask = new Task({
                name: parsed[i].name,
                status: parsed[i].status,
                priority: new Priority({
                    name: parsed[i].priority.name,
                    value: parsed[i].priority.value
                })
            });
            self.tasksArr.push(tTask);
        }
    }
};
self.localStorageLoad();
}

HTMLでやりたいことはとても簡単です。追加したすべてのタスクはlocalStorageに保存されます。ご覧のとおり、保存機能は、要素が追加および削除されるたびに呼び出されます。ただし、各タスクのステータスが変更されたらすぐに保存したいのですが、ここでサブスクライブを使用することはできません。

self.status.subscribe(function() {});

Taskクラスからself.tasksArrにアクセスできないためです。

何か案が？どういうわけかself.tasksArrを公開することは可能ですか？

前もって感謝します！

4

1 に答える 1

1

これを試して：

self.addTask = function () {
  var myTask = new Task({ name: self.currentTask().name(), status: false, priority: self.currentTask().priority() })
  myTask.status.subscribe(function (newValue) {
    self.localStorageSave();
  });
  self.tasksArr.push(myTask);
  self.localStorageSave();
  self.currentTask().name("");
};
于 2013-03-20T20:08:57.353 に答える