2013-05-28 81 views
2

我在這裏以下RN的博客文章有關的pub/sub同步:使用knockout訪問跨ViewModel的功能?

http://www.knockmeout.net/2012/05/using-ko-native-pubsub.html

我的應用程序有一個「外殼」視圖模型與各種內部的ViewModels,其中之一是「文件夾」。在文件夾viewmodel中,我列出了文件夾。

從shell的菜單欄中,我需要能夠添加另一個文件夾。這是我實現它現在的方式:

在shell.js:

this.clickedAddFolder = ko.observable(false).publishOn("CLICKED_ADD_FOLDER"); 
this.addFolder = function() { clickedAddFolder(true); clickedAddFolder(false); }; 

然後在folder.js:

var clickedAddFolder = ko.observable().subscribeTo("CLICKED_ADD_FOLDER"); 
innerModel.addFolder = ko.computed(function() { 
       if (clickedAddFolder()) { 
        var folder = new folderViewModel(addFolderDto); 
        innerModel.folders.push(folder); 
        refreshIsotope(); 
       } 
      }).bind(this); 

的想法是,shell.js會迅速切換folder.js已訂閱的clicked_add_folder屬性。計算的observable檢測到這個變化並觸發一些功能 - 添加一個文件夾。這是一個合理的解決方案?我想避免找到「有效」的解決方案;我想學習如何正確實現這個結果。

回答

3

我假設你正在使用ko.postbox?如果是這樣的話,我會覺得這是一個有點清潔劑,如果你只是放棄了觀測和發佈/直接訂閱的話題,像這樣:

// shell.js 
this.addFolder = function addFolder(e) { 
    // 'Add Folder' clicked, publish on the topic 
    ko.postbox.publish('CLICKED_ADD_FOLDER', e); 
}; 

//folder.js 
ko.postbox.subscribe('CLICKED_ADD_FOLDER', function onClickedAddFolder(e) { 
    var folder = new folderViewModel(addFolderDto); 
    innerModel.folders.push(folder); 
    refreshIsotope(); 
}); 

這裏是沒有實際加載郵箱一個的jsfiddle,但我基本上只是從郵箱撕開了兩種可能的功能:http://jsfiddle.net/QqBhk/

+0

我其實這樣做沒有ko.postbox - 我永遠無法得到它的工作。我只是添加了~10行代碼來使publishOn和subscribeTo綁定起作用。我確實通過安裝ko-postbox來嘗試你的方法,但遇到了一個錯誤,說ko沒有方法「郵箱」,所以我恢復了我的更改。 – RobVious

+0

@RobVious你在加載腳本的順序是什麼? Knockout必須加載*之前*郵箱和郵箱必須加載*之前*您的代碼嘗試使用它。無論哪種方式,我都會嘗試掀起一個示例來演示如何在沒有郵箱的情況下實現這一點。 – GotDibbs

+0

@RobVious我剛剛更新了一個jsfiddle的鏈接,展示了郵箱代碼工作的重要部分。讓我知道我是否可以進一步澄清。 – GotDibbs