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在子訂閱上觸發父功能

回答

相關問題