上节课提到,想在同一个页面,实现无刷新对话功能,得用js去提交和接收数据。但是这个数据,是在页面上勾选或者是填写的,那怎么传给js呢?这就是这节课要讲解的内容,叫做数据的双向绑定。

代码示例

1、数据双向绑定

所谓的数据双向绑定,就是界面和数据模型之间的变化,会自动相互更新。

<script>
    function app(){
        return {
            params: {
                model_name: llmModels[0],
                dataset_ids: []
            },
            chatInput: '',
        }
</script>

<select id="model-select" x-model="params.model_name">
<option :selected="params.model_name === model_name"></option>
<input type="checkbox" :value="dataset.id" x-model="params.dataset_ids">
<input type="text" x-model="chatInput">

2、渲染对话内容

messages: [
    {'role': 'user', 'content': '给我讲个笑话'},
    {'role': 'assistant', 'content': '一个男人去看医生,说:“医生,我每次喝咖啡的时候,眼睛都会痛。” 医生:“你试过把 **勺子** 拿出来吗?”'},
],

<!-- 动态聊天消息将插入此处 -->
<template x-for="(message, index) in messages" :key="index">
    <div>
        <template x-if="message.role === 'user'">
            <div class="flex bg-blue-100 px-4 py-2 rounded-lg">
                <span class="w-16 text-right font-medium flex-shrink-0">用户:</span>
                <div class="flex-1" x-text="message.content"></div>
            </div>
        </template>
        <template x-if="message.role === 'assistant'">
            <div class="flex bg-gray-100 px-4 py-2 rounded-lg">
                <span class="w-16 text-right font-medium flex-shrink-0">大模型:</span>
                <div class="flex-1" x-text="message.content"></div>
            </div>
        </template>
    </div>
</template>

3、渲染Markdown格式

大模型返回的内容,有可能是markdown格式的,借助一个三方js库,实现markdown格式的解析。

convertMarkdown: function(content) {
    return marked.parse(content);
}

x-html="convertMarkdown(message.content)"

4、自动滚动窗口到最新消息

当消息很多时,窗口自动滚动到最新消息。

updateChatWindow: function() {
    const chatWindow = document.getElementById('chat-window');
    chatWindow.scrollTop = chatWindow.scrollHeight;
},
init: function(){
    this.$watch('messages', (value) => {
        this.updateChatWindow();
    });
    this.$nextTick(() => {
        this.updateChatWindow();
    });
}

这节课内容比较少,但是非常重要,正因为有了数据双向绑定,才能实现后面逐字输出的效果。大家如果第一次听说这个概念,可以先去了解一下。

本文链接:http://edu.ichenhua.cn/edu/note/768

版权声明:本文为「陈华编程」原创课程讲义,请给与知识创作者起码的尊重,未经许可不得传播或转售!