上节课提到，想在同一个页面，实现无刷新对话功能，得用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://www.chenhuax.com/edu/note/768

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