Knockout按钮点击绑定数据到文本框问题求助

嘿，刚接触Knockout的话，核心就是得用它的**observable（可观察对象）**来实现数据和UI的自动同步，你现在的问题大概率是没把firstname定义成observable，或者更新的时候没走正确的方式。我给你整理一下完整的解决方案：

首先，确保你的ViewModel里的firstname是Knockout的observable属性，然后在REST请求成功后更新这个属性，同时HTML里正确绑定data-bind。

1. 完善你的ViewModel（test.js里的代码） #

把你的ViewModel改成这样，重点是用ko.observable()定义属性，并且处理好ajax回调里的上下文：

function MyViewModel() {
    var self = this;
    // 定义可观察属性，用于绑定到firstname文本框
    self.firstname = ko.observable('');
    // 假设你有一个输入框用来填触发请求的参数（比如查询的用户名）
    self.queryValue = ko.observable('');

    // 点击按钮触发的请求方法
    self.fetchSharePointData = function() {
        // 替换成你的SharePoint REST请求地址，这里以查询站点用户为例
        var requestUrl = "/sites/crdrdev/_api/web/SiteUsers/getByTitle('" + self.queryValue() + "')";
        
        $.ajax({
            url: requestUrl,
            type: "GET",
            headers: {
                "Accept": "application/json;odata=verbose"
            },
            success: function(response) {
                // 更新observable属性，UI会自动同步
                self.firstname(response.d.AccountName); // 这里根据你实际返回的账户名字段调整
            },
            error: function(err) {
                console.log("请求失败：", err);
            }
        });
    };
}

// 应用Knockout绑定
ko.applyBindings(new MyViewModel());

2. HTML部分的绑定 #

确保你的文本框和按钮正确使用data-bind指令：

<!-- 输入查询参数的文本框 -->
<input type="text" data-bind="value: queryValue" placeholder="输入要查询的用户名">
<!-- 触发请求的按钮 -->
<button data-bind="click: fetchSharePointData">获取账户名</button>
<!-- 显示账户名的目标文本框 -->
<input type="text" data-bind="value: firstname" readonly>

关键注意点 #

• 必须用observable：普通JavaScript变量不会触发UI更新，只有ko.observable()包装的属性才能在值变化时自动同步到页面。
• 上下文保存：在ajax回调里，this的指向会改变，所以提前用var self = this;保存ViewModel实例，确保能正确访问self.firstname()。
• REST返回字段：根据你实际从SharePoint获取的字段调整赋值语句，比如如果返回的账户名是LoginName，就改成self.firstname(response.d.LoginName)。

这样调整后，当你点击按钮获取到SharePoint的数据后，firstname文本框就会自动显示账户名啦。

内容的提问来源于stack exchange，提问作者karthik