【问题标题】:Accessing functions across viewModels with knockout?通过淘汰赛访问跨视图模型的函数?
【发布时间】:2013-05-28 00:44:10
【问题描述】:

我在这里关注 RN 关于发布/订阅同步的博文:

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

我的应用程序有一个带有各种内部视图模型的“外壳”视图模型,其中一个是“文件夹”。在文件夹视图模型中,我列出了文件夹。

从 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 检测到这个变化并触发一些功能——添加一个文件夹。这是一个合理的解决方案吗?我想避免找到“有效”的解决方案;我想学习如何正确地达到这个结果。

【问题讨论】:

    标签: knockout.js durandal


    【解决方案1】:

    我假设您使用的是 ko.postbox? 如果是这种情况,我认为如果您只是删除 observables 并像这样直接发布/订阅主题会更干净一些:

    // 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/

    【讨论】:

    • 我实际上是在没有 ko.postbox 的情况下这样做的——我永远无法让它工作。我刚刚添加了大约 10 行代码来让 publishOn 和 subscribeTo 绑定工作。我确实通过安装 ko-postbox 尝试了你的方法,但遇到了一个错误,说 ko 没有方法“邮箱”,所以我恢复了我的更改。
    • @RobVious 您加载脚本的顺序是什么?必须在 邮箱之前加载淘汰赛,并且必须在 在 您的代码尝试使用它之前加载邮箱。无论哪种方式,我都会尝试制作一个示例来演示如何在没有邮箱的情况下实现这一目标。
    • @RobVious 我刚刚更新了一个指向 jsfiddle 的链接,该链接展示了邮箱代码工作的重要部分。如果我能进一步澄清,请告诉我。
    • JFYI:您甚至可以考虑使用原生 Durandal pub/sub durandaljs.com/documentation/Leveraging-Publish-Subscribe 而不是自己维护 10 行代码 ;-)。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-12-21
    • 2013-05-31
    • 2020-12-19
    • 1970-01-01
    • 2018-06-02
    • 2018-06-25
    • 2015-08-19
    相关资源
    最近更新 更多