knockout.js初始化視圖模型從另一個視圖模型

Question

這是我的代碼

視圖模型1

function AppViewModel() { 
var self = this; 
self.boardtext = ko.observable(); 
self.board = ko.observableArray([ 
    { boardname: 'Board' }, 
    { boardname: 'Board' }, 
    { boardname: 'Board' } 
]); 

self.addboard = function() { 
    self.board.push({ boardname: self.boardtext() }); 
    // initialize ListModal to zero 
}; 

self.removeboard = function() { 
    self.board.remove(this); 
} 

}

視圖模型2

var initialData = []; 

var ListModal = function (lists) { 
    var self = this; 
    self.cardtext = ko.observable(); 
    self.lists = ko.observableArray(ko.utils.arrayMap(lists, function (list) { 
     return { listname: list.listname, cardlists: ko.observableArray(list.cardlists), showRenderTimes: ko.observable(false) }; 
    })); 



}; 

ko.applyBindings(new AppViewModel(), document.getElementById("container1")); 
ko.applyBindings(new ListModal(initialData), document.getElementById("container2")); 

只要我按addboard怎麼能我將我的ListModal設置爲零？

Answer 1

如果要重新初始化listModal，請嘗試在1個viewmodel中包裝這兩個viewmodel，以便它們可以相互關聯。然後您可以執行以下操作：

var initialData = []; 

var ListModal = function (lists) { 
    var self = this; 
    self.cardtext = ko.observable(); 
    self.lists = ko.observableArray(ko.utils.arrayMap(lists, function (list) { 
    return { listname: list.listname, cardlists: ko.observableArray(list.cardlists), showRenderTimes: ko.observable(false) }; 
    })); 
} 

function AppViewModel(parent) { 
    var self = this; 

    // this will keep the object of ViewModel 
    self.parentObject = parent; 

    self.boardtext = ko.observable(); 
    self.board = ko.observableArray([ 
    { boardname: 'Board' }, 
    { boardname: 'Board' }, 
    { boardname: 'Board' } 
    ]); 

    self.addboard = function() { 
    self.board.push({ boardname: self.boardtext() }); 

    // re-initialize listModal 
    self.parentObject.listModal(new ListModal(initialData)); 
    }; 

    self.removeboard = function() { 
    self.board.remove(this); 
    }; 
} 

function ViewModel() { 
    var self = this; 
    self.appViewModel = ko.observable(new AppViewModel(self)); 
    self.listModal = ko.observable(new ListModal(initialData)); 
} 

// provide another div which wrap container 1 and 2 together 
ko.applyBindings(new ViewModel(), document.getElementById("container1And2"));