如何正确扩展现有的MVVM UI组件？

提问者：小点点

如何正确扩展现有的MVVM UI组件？

在我使用TornadoFX的静态编程语言桌面应用程序中，我创建了一个AudioCard布局（VBox的子类），它有一些标签和基本的音频播放器控件。这个AudioCard有一个AudioCardViewModel处理来自UI的事件，还有一个AudioCardModel保存标题、副标题、音频文件路径等信息。简化版本如下所示。

data class AudioCardModel(
    var title: String,
    var audioFile: File
)

class AudioCardViewModel(title: String, audioFile: File) {
    val model = AudioCardModel(title, audioFile)
    var titleProperty = SimpleStringProperty(model.title)

    fun playButtonPressed() {
        // play the audio file from the model
    }
}

class AudioCard(title: String, audioFile: File) : VBox() {
    val viewModel = AudioCardViewModel(title, audioFile)
    init {
        // create the UI
        label(title) {
            bind(viewModel.titleProperty)
        }
        button("Play") {
            viewModel.playButtonPressed()
        }

    }
}

到目前为止，我一直试图使代码尽可能通用，允许我自己或其他人在未来需要播放音频的应用程序中重用此 UI 组件。但是，对于我当前的应用程序，拥有此 UI 组件的更专业版本是最有意义的，该版本直接从我的数据模型类初始化自身并可以扩展某些操作。我尝试过这样的事情（上一个代码块中的必填字段和类已切换为打开）：

data class CustomAudioCardModel(
    var customData: CustomData
)

class CustomAudioCardViewModel(customData: CustomData)
    : AudioCardViewModel(customData.name, customData.file) {
    val model = CustomAudioCardModel(customData)

    override fun playButtonPressed() {
        super.playButtonPressed()
        // do secondary things only needed by CustomAudioCardViewModel
    }
}

class CustomAudioCard(customData: CustomData): AudioCard(customData.name, customData.file) {
    override val viewModel = CustomAudioCardViewModel(customData)
}

不幸的是，这并不那么简单。通过在自定义音频卡中重写 viewModel，viewModel 属性不再是最终属性，当 AudioCard 超类的 init 函数尝试使用视图模型在子类初始化视图模型之前设置标题标签时，会导致 NullPointerException。

我怀疑，通过定义一个AudioCardViewModel接口和/或使用Kotlin使用by关键字进行委托，可能会有一种解决方法，但我的印象是，定义接口（如MVP中的）对MVVM来说不应该是必要的。

总结一下：扩展现有 MVVM 控件的正确方法是什么，特别是在 Kotlin TornadoFX 库的上下文中？

共1个答案

匿名用户

这是我从保罗·斯托维尔那里得到的解决方案。我没有在视图中创建视图模型（Stovell文章中的选项1），而是将视图模型注入到视图中（选项2）。在TornadoFX文档的帮助下，我还进行了重构，以更好地遵守MVVM，并给出了关于业务逻辑应该走向何方的答案。我的AudioCard代码现在看起来如下：

open class AudioCardModel(title: String, audioFile: File) {
    var title: String by property(title)
    val titleProperty = getProperty(AudioCardModel::title)

    var audioFile: File by property(audioFile)
    val audioFileProperty = getProperty(AudioCardModel::audioFile)

    open fun play() {
        // play the audio file
    }
}

open class AudioCardViewModel(private val model: AudioCardModel) {
    var titleProperty = bind { model.titleProperty }

    fun playButtonPressed() {
        model.play()
    }
}

open class AudioCard(private val viewModel: AudioCardViewModel) : VBox() {
    init {
        // create the UI
        label(viewModel.titleProperty.get()) {
            bind(viewModel.titleProperty)
        }
        button("Play") {
            viewModel.playButtonPressed()
        }
    }
}

扩展视图现在如下所示：

class CustomAudioCardModel(
    var customData: CustomData
) : AudioCardModel(customData.name, customData.file) {
    var didPlay by property(false)
    val didPlayProperty = getProperty(CustomAudioCardModel::didPlay)

    override fun play() {
        super.play()
        // do extra business logic
        didPlay = true
    }
}

class CustomAudioCardViewModel(
    private val model: CustomAudioCardModel
) : AudioCardViewModel(model) {
    val didPlayProperty = bind { model.didPlayProperty }
}

class CustomAudioCard(
    private val viewModel: CustomAudioCardViewModel 
) : AudioCard(customViewModel) {
    init {
       model.didPlayProperty.onChange { newValue ->
           // change UI when audio has been played
       }
    }
}

我看到了几种清理此问题的方法，尤其是关于模型的方法，但此选项似乎在我的场景中效果很好。