javascript - KnockOutJS 在子订阅上触发父函数

Question

我目前正在尝试学习 KnockOutJS。我认为创建一个简单的任务列表应用程序是个好主意。我不想在这里写很长的文字，让我们深入探讨我的问题。我感谢所有的帮助 - 我是 KnockOutJS 的新手!

任务声明如下:

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);
}

View 模型看起来像这样

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。正如您所看到的，每次添加和删除元素时都会调用保存函数。但我也想每个任务的状态一改变就保存，但是这里不能使用subscribe，比如

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

因为我无法从 Task 类访问 self.tasksArr。

有什么想法吗？是否可以以某种方式公开 self.tasksArr？

提前致谢!

Answer 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("");
};