knockoutJS中的三向綁定？可能嗎？

Question

我在下面寫了這段代碼，但我無法理解如何將編輯後的值綁定到表中。所以我的問題是：

1. 當我點擊「編輯」按鈕，總會有對話窗口，並顯示
   我從表中的值在對話框的輸入。
2. 我編輯值。
3. 我點擊接受按鈕
4. 我的新（編輯）的值保存在localStorage的並表（H3文本）以下輸出，但你重新加載頁面之前，他們不會更改值在表中，

所以，我的問題是：爲什麼我的代碼沒有替換表中的值而不重新加載頁面？

book.name = self.editor.name(); 
book.author = self.editor.author(); 
book.genre = self.editor.genre(); 

完整的代碼片段：

var books = [ 
    { 
     id : 1, 
     name : "Javascript", 
     author : "David Flanagan", 
     genre : "learning", 
     price : "100" 
    }, 
    { 
     id : 2, 
     name : "PHP", 
     author : "Luke Welling", 
     genre : "learning", 
     price : "120" 
    }, 
    { 
     id : 3, 
     name : "Learning JavaScript Design Patterns", 
     author : "Addy Osmani", 
     genre : "learning", 
     price : "400" 
    }, 
    { 
     id : 4, 
     name : "Understanding ECMAScript 6", 
     author : "Nicholas C. Zakas", 
     genre : "learning", 
     price : "204" 
    }, 
    { 
     id : 5, 
     name : "Programming JavaScript Applications", 
     author : "Eric Elliot", 
     genre : "learning", 
     price : "214" 
    }, 
    { 
     id: 6, 
     name : "The C Programming Language", 
     author : "Brian W. Kernighan", 
     genre : "learning", 
     price : "514" 
    }, 
    { 
     id : 7, 
     name : "Programming Pearls", 
     author : "Jon L. Bentley", 
     genre : "learning", 
     price : "114" 
    }, 
    { 
     id : 8, 
     name : "Java Concurrency in Practice", 
     author : "Brian Goetz", 
     genre : "learning", 
     price : "140" 
    } 
]; 
var idNumber; 
for (var i = 0; i < books.length; i++) { 
    idNumber = books.length 
} 
function Book(id, name, author, genre) { 
    this.id = ko.observable(id); 
    this.name = ko.observable(name); 
    this.author = ko.observable(author); 
    this.genre = ko.observable(genre); 
} 
var bookModel = function (books) { 
    var self = this; 
    var rowId; 
    self.books = ko.observableArray(books); 

    self.total = ko.computed(function() { 
     var total = 0; 
     for (var i = 0; i < self.books().length; i++) { 
      total = total + +self.books()[i].price; 
     } 
     return total.toFixed(2); 
    }); 

    self.addBook = function() { 
     idNumber += 1; 
     console.log(idNumber); 
     self.books.push({ 
      id: idNumber, 
      name: '', 
      author: '', 
      genre: '', 
      price: '' 
     }); 

    }; 

    self.removeBook = function (book) { 
     self.books.remove(book); 
     rowId = book.name; 
     console.log(rowId); 
     updateLocalStorage(); 
    }; 

    self.editor = new Book(); 

    //self.editBook = function (book) { 
    self.editItem = function (book) { 
     // populate editor values 
     self.editor.id(book.id); 
     self.editor.name(book.name); 
     self.editor.author(book.author); 
     self.editor.genre(book.genre); 

     // create dialog 
     $('#editDisplay').dialog({ 
      modal: true, 
      resizable: false, 
      width: 400, 
      buttons: { 
       Accept: function() { 
        $(this).dialog("close"); 
        book.name = self.editor.name(); 
        book.author = self.editor.author(); 
        book.genre = self.editor.genre(); 

        console.log(book); 
        localStorage.setItem("table", JSON.stringify(books)); 
        $('#outputName').text(book.name) 
        $('#outputAuthor').text(book.author) 

        //location.reload() 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }; 

    //}; 


    function updateLocalStorage() { 
     var localBook = JSON.parse(localStorage['table']); 
     for (var i = 0; i < localBook.length; i++) { 
      if (localBook[i].name == rowId) { 
       localBook.splice(i, 1); 
       localStorage.setItem("table", JSON.stringify(localBook)); 
       break; 
      } 
     } 
    } 


    self.save = function() { 
     localStorage.setItem("table", JSON.stringify(books)); 
    }; 
}; 


if (localStorage['table'] == '[]') { 
    localStorage.clear(); 
} 

if (localStorage['table'] !== undefined) { 
    var local = JSON.parse(localStorage['table']); 
    var viewModel = new bookModel(local); 

} 
else { 
    var viewModel = new bookModel(books); 
    localStorage.setItem("table", JSON.stringify(self.books)); 
} 

ko.applyBindings(viewModel); 

And my jsFiddle

Answer 1

book.name不是可觀察到的，當你第一次viewModel通過實例bookModel您創建。

見你通過靜態對象的數組（我的意思是，他們的性質是不可觀察）：

self.books = ko.observableArray(books);

所以，當你申請綁定的tds綁定到靜態值。

您可以嘗試的是使用您的Book構造函數構造具有可觀察屬性的書籍。例如。

self.books = ko.observableArray(books.map(function (book) { 
    return new Book(book); 
})); 

然後在編輯本書後，你將能夠更新，像這樣的書的可觀測性：

book.name(self.editor.name()); 
book.author(self.editor.author()); 
book.genre(self.editor.genre()); 

這是想法，你當然需要認真貫徹執行。