javascript - 如何使用 Knockout.js 将下拉列表中的选定项目自动更新到 SignalR 中的所有已连接客户端？

Question

已解决:

添加了新的更正代码行并对旧代码行进行了注释。

---

对于使用 SignalR 的实时 应用程序，我希望所有连接的客户端都能实时看到用户所做的更改。

使用简单的文本框没问题，但是当我使用下拉列表时:当用户选择一个项目时，我想要选择的下拉列表中的项目自动设置(自动更新)给所有连接的客户端。

Knockout.js 似乎是显而易见的选择，但我认为我在订阅...或其他地方有问题？

我有什么:

(ASP .NET Razor) 下拉菜单:

//@Html.DropDownListFor(model => model.UserProfile.UserId, (SelectList)ViewBag.DDLUsersId, "Select User", new { @class = "ui-corner-all", @data_bind="value: selectedResponsible_UserId" })

@Html.DropDownListFor(model => model.UserProfile.UserId, (SelectList)ViewBag.DDLUsersId, "Select User", new { @class = "ui-corner-all", @data_bind="value: Responsible_UserId" })

(HTML) 生成:

//<select class="ui-corner-all" data-bind="value: selectedResponsible_UserId" id="UserProfile_UserId" name="UserProfile.UserId"><option value="">Select User</option>

<select class="ui-corner-all" data-bind="value: Responsible_UserId" id="UserProfile_UserId" name="UserProfile.UserId"><option value="">Select User</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
</select>

(JavaScript) View 模型:

function taskViewModel(id, title, Responsible_UserId, ownerViewModel)
{
    this.taskId = id;

    this.title = ko.observable(title);

    //this.selectedResponsible_UserId = ko.observable(Responsible_UserId);

    this.Responsible_UserId = ko.observable(Responsible_UserId);

    this.notification = function (b) { notify = b }

    var self = this;

    this.title.subscribe(function (newValue) 
    {
        ownerViewModel.updateTask(ko.toJS(self));
    });

    //this.selectedResponsible_UserId.subscribe(function (newValue) 

    this.Responsible_UserId.subscribe(function (newValue) 
    {
        ownerViewModel.updateTask(ko.toJS(self));
    });
}

(JavaScript) Function from Client-Side 用指定的对象从Server-Side 调用函数:

this.updateTask = function (task)
{    
    if (notify) 
        this.hub.server.s_Update(task);
}

(C#) Function 来自 Server-Side 修改 DB 中的值并从 < strong>Client-Side 为所有连接的 Clients 指定对象:

public bool S_Update(Task updatedTask)
{
    using (var context = new ToDoDbContext())
    {
        var oldTask = context.Tasks.FirstOrDefault(t => t.taskId == updatedTask.taskId);

        if (oldTask == null)
            return false;
        else
        {
            oldTask.title = updatedTask.title;

//??? Here, value 'updatedTask.Responsible_UserId' was NULL !!!
            oldTask.Responsible_UserId = updatedTask.Responsible_UserId;

            context.SaveChanges();

            Clients.All.C_TaskUpdated(oldTask);

            return true;
        }
    }
}

(JavaScript) 来自客户端的函数应该更新界面>:

this.hub.client.C_TaskUpdated = function (t)
{
    var task = ko.utils.arrayFilter(tasks(), function (value) { return value.taskId == t.taskId; })[0];

    notify = false;
        task.title(t.title);    

//!! obvious, here was set to NULL.     
        //task.selectedResponsible_UserId(t.Responsible_UserId);

        task.Responsible_UserId(t.Responsible_UserId);
    notify = true;
};

Answer 1

如果我没听错，你的 prop 在客户端被称为 selectedResponsible_UserId，在服务器端被称为 Responsible_UserId。看起来这种潜在的不匹配导致了您的问题。