KnockOutJS在子订阅上触发父功能

我目前正在努力学习KnockOutJS。我认为创建一个简单的任务列表应用程序是一个好主意。我不想在这里写一个长文本，让我们深入我的问题。我很感激所有的帮助 - 我是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); 
}

和视图模型看起来像这样

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公开？

在此先感谢！

来源

2013-03-20 Robert M

这里来RP尼迈耶！ – jmeas 2013-03-20 18:17:29

为什么不在你的'addTask（）'方法中订阅它？创建任务，然后订阅“状态”。我不是100％确定的，但我相信这个处理程序，'this'会指向你的'ko.observable（）'作为'status'。 – Pete 2013-03-20 18:22:30

hm ..订阅addTask方法？不太确定那是什么意思。你的意思是在创建任务时： var status = ko.observable（false）; status.subscribe（function（）{ // do something something }）; listOfTasks.push（new Task（{status：status}））; 这样的事情？或者你是什么意思？ – 2013-03-20 18:36:14

试试这个：

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-20 20:08:57 Danwilliger

是的，这个工程！与@Pete在他最后的评论中描述的完全一样。谢谢！ – 2013-03-20 20:15:39

哇，为什么我没有想到这个？哦，等等，我做到了！ – Pete 2013-03-20 20:45:11

KnockOutJS在子订阅上触发父功能

回答

相关问题