KnockoutJS - 从另一个模型视图更新observable

Posted 2021-05-05

我有一个包含可观察的ComposePopupView()模型视图

this.attachments = ko.observableArray([]);

以及下面的方法

ComposePopupView.prototype.addDropboxAttachment = function (oDropboxFile)
{
    var
        oAttachment = null,
        iAttachmentSizeLimit = Utils.pInt(Settings.settingsGet('AttachmentLimit')),
        mSize = oDropboxFile['bytes']
    ;

    oAttachment = new ComposeAttachmentModel(
        oDropboxFile['link'], oDropboxFile['name'], mSize
    );

    oAttachment.fromMessage = false;
    oAttachment.cancel = this.cancelAttachmentHelper(oDropboxFile['link']);
    oAttachment.waiting(false).uploading(true).complete(false);

    this.attachments.push(oAttachment);

    this.attachmentsPlace(true);

    if (0 < mSize && 0 < iAttachmentSizeLimit && iAttachmentSizeLimit < mSize)
    {
        oAttachment.uploading(false).complete(true);
        oAttachment.error(Translator.i18n('UPLOAD/ERROR_FILE_IS_TOO_BIG'));
        return false;
    }

    Remote.composeUploadExternals(function (sResult, oData) {

        var bResult = false;
        oAttachment.uploading(false).complete(true);

        if (Enums.StorageResultType.Success === sResult && oData && oData.Result)
        {
            if (oData.Result[oAttachment.id])
            {
                bResult = true;
                oAttachment.tempName(oData.Result[oAttachment.id]);
            }
        }

        if (!bResult)
        {
            oAttachment.error(Translator.getUploadErrorDescByCode(Enums.UploadErrorCode.FileNoUploaded));
        }

    }, [oDropboxFile['link']]);

    return true;
};

然后我创建了我的另一个名为UsersDocumentsPopupView()的模型视图，我正在访问上面的方法

DropBox = __webpack_require__(/*! View/Popup/Compose */ 31)
....
DropBox.prototype.addDropboxAttachment(aFiles[0]);

但它会引发错误

无法读取未定义的属性“附件”

然后我决定添加observable

this.attachments = ko.observableArray([]);

到我的模型，然后厌倦了

this.attachment.push(oAttachment);

其中oAttachment是取自aFiles数组的对象，但我仍然得到同样的错误。

我的问题是，如何从一个执行另一个模型视图的模型视图更新可观察的attachments？

PS。当我在ComposePopupView()下面做代码时，它工作正常

var aFiles = [JSON.parse('{"isDir": false,  "name": "koala.jpg", "bytes": 780831,"link": "http://localhost/data/koala.jpg","id": "id:UxmT1S5QcFAAAAAAAAAACw"}')];

if (aFiles && aFiles[0] && aFiles[0]['link'])
{
  console.log("Test");
  self.addDropboxAttachment(aFiles[0]);
}

那么在这种情况下如何将数据qazxsw poi从qazxsw poi传递到qazxsw poi模型视图？

答案

aFiles是UsersDocumentsPopupView()实例的财产。

ComposePopupView()是attachments原型的一种方法，必须用ComposePopupView上下文来调用addDropboxAttachment的ComposePopupView才能工作。

有几种方法可以解决这个问题。例如：

• 最有可能的是：您尚未创建实例： this
• 可能：您已经创建了一个实例但无法访问它：在构造函数中传递对要引用的实例的引用。
• 你是否只会创建一个instance实例？看看“Singleton”模式。例如。： ComposePopupView
• 计划创建共享DropBox = __webpack_require__(/*! View/Popup/Compose */ 31); const dropBox = new DropBox(); dropBox.addDropboxAttachment(aFiles[0]); 数据的多个实例？使其成为静态值。

另一答案

我最终使用了Knockout的pub / sub功能。

以下基本示例：

ComposePopupView

第一个视图模型订阅特定主题，第二个视图模型通过邮箱通知该主题。彼此之间没有直接的依赖关系。

当然，邮箱不需要是全局的，可以传递给视图模型构造函数，也可以只在自执行函数内创建。

样本：// "Private" to the module const MySingletonClass = function() { /* ... */ } MySingletonClass.prototype.someMethod = function () { }; let singletonInstance = null; // Only expose a way to get the instance: export const getSingletonInstance = function() { if (!singletonInstance) singletonInstance = new MySingletonClass(); return singletonInstance; } // In another module: import { getSingletonInstance } from "./MySingletonClass"; const dropBox = getSingletonInstance(); dropBox.someMethod(aFiles[0]);

此外，邮箱可能只是一个attachments（包含在ko.observable函数中）。