简单的 KnockoutJS 绑定似乎不起作用

Question

我的 KnockoutJS 脚本似乎有一些错误，但我不知道它来自哪里。 这是 HTML 代码：

    <h2>SendMessage</h2>

<div class="form-group" id="messageSender">
    <label>Select User Type</label>
    <select id="userType" data-bind="options: $parent.userTypes, optionsText: 'type', optionsValue: 'role'
            optionsCaption: 'Select a user type:', value: selectedUserType"></select><br/>
    <label>Select Reciepient</label>
    <select id="reciepient" data-bind="options: $parent.users, optionsText: 'fname', optionsValue: 'id', value: selectedUser, visible: userTypeSelected"></select>
    <br />
    <label>Message Text</label>
    <textarea data-bind="value:messageText, visible: userTypeSelected"></textarea><br/>
    <button data-bind="click:sendMessage">Send</button>
</div>

这是我的 JavaScript 代码：

$(document).ready(function () {


  var messageModel =   function Message(sender_id, reciever_id, messageText) {

        var self = this;

        self.sender_id = ko.observable(sender_id);
        self.reciever_id = ko.observable(reciever_id);
        self.messageText = ko.observable(messageText);
        self.mdate = Date.now();

        //send ajax request to the api  to add a send
        self.addMessage = function () {

            var dataObject = ko.toJSON(this);

            $.ajax({
                url: "/api/messageapi",
                type: 'add',
                data: dataObject,
                contentType: 'application/json',
                success: function (data) {
                    self.sender_id(null);
                    self.reciever_id(null);
                    self.messageText('');

                    alert("Message send successfully!");
                }
            });

        }


    }

var messageViewModel = function () {

        var self = this;

        self.userTypeSelected = ko.observable();
        //List of roles
        self.userTypes = [
           { role: 2, type: "Teacher" },
           { role: 3, type: "Parent" }
        ];

        self.messageText = ko.observable();
        self.users = function () {

            var role = this.userTypeSelected;
            if (role === 2) {
                $.ajax(
              {
                  url: "/api/MessageApi/GetTeachers/" + role,
                  type: 'get',
                  contentType: 'application/json',
                  success: function (data) {
                      return data;
                  },
                  fail: function () {
                      alert("Error occurred while sending data");
                  }
              });
            }


        };

        self.sendMessage = function () {
            alert("You clicked me!");//added this for testing whether the code works or not
        }

    }


    ko.applyBindings(new messageViewModel());
});

我在这里试图实现的是用户选择他/他想要向其发送消息的用户类型。 选择用户类型后，通过 Web Api（我使用的是 asp.net mvc5）通过 ajax 调用从数据库中获取用户并显示在下拉列表中。 但是，当我运行以下代码时，似乎不起作用：

• 第一个下拉菜单不显示任何内容。 但是，我已将其绑定到userTypes数组
• 即使我已将其绑定到sendMessage函数，发送按钮也不会响应单击事件。
• 第二个下拉列表的可见性由userTypeSelected值控制，但它始终显示。

我的 ajax 调用中也可能存在问题，但以上是明显的问题

我在这里做错了什么？ 提前致谢。

Answer 1

你的代码有很多错误

1. 您的select中缺少逗号之后

   选项值：'角色'

2. 你不应该在你的绑定中使用$parent只在options: userTypes和options: users使用属性的名称

   <select id="userType" data-bind="options: userTypes, optionsText: 'type', optionsValue: 'role', optionsCaption: 'Select a user type:', value: selectedUserType"></select><br /> <label>Select Reciepient</label> <select id="reciepient" data-bind="options: users, optionsText: 'fname', optionsValue: 'id', value: selectedUser, visible: userTypeSelected"></select>

3. 在您首先select这部分： value: selectedUserType ， selectedUserType属性不存在。 您的意思是value: userTypeSelected吗？

    <select id="userType" data-bind="options: userTypes, optionsText: 'type', optionsValue: 'role', optionsCaption: 'Select a user type:', value: userTypeSelected">

4. 你缺少self.selectedUser = ko.observable(); 在您的视图模型中

5. 您的var messageModel = function Message(...)似乎完全没有意义，因为没有在任何地方引用。

6. self.users = function()...不会以这种方式工作。 您需要的是在第一个选择的change事件中设置一个函数来调用 $.ajax 来加载self.users = ko.observableArray()

   • 将self.users = function()...替换为self.users = ko.observableArray()

   • 将self.userTypeChanged函数添加到您的 viewModel，该函数将调用 $.ajax 并将结果填充到用户 observableArray。

     • 你在var role = self.userTypeSelected();之后缺少一对var role = self.userTypeSelected();
     • 在success回调中，您需要填写users observableArray: self.users(data);

这应该是self.userTypeChanged函数

    self.userTypeChanged = function () {
        var role = self.userTypeSelected();
        if (role === 2) {
            $.ajax({
                url: "/api/MessageApi/GetTeachers/" + role,
                type: 'get',
                contentType: 'application/json',
                success: function (data) {
                    self.users(data);
                },
                fail: function () {
                    alert("Error occurred while sending data");
                }
            });
        }
    };

7. 将change事件添加到第一个选择以调用userTypeChanged ：

    <select id="userType" data-bind="options: userTypes, optionsText: 'type', optionsValue: 'role', optionsCaption: 'Select a user type:', value: userTypeSelected, event: { change : userTypeChanged }"></select>

这是完整的代码。 我希望这有帮助

HTML

<h2>SendMessage</h2>

<div class="form-group" id="messageSender">
    <label>Select User Type</label>
    <select id="userType" data-bind="options: userTypes, optionsText: 'type', optionsValue: 'role',
        optionsCaption: 'Select a user type:', value: userTypeSelected, event: { change : userTypeChanged }"></select><br />
    <label>Select Reciepient</label>
    <select id="reciepient" data-bind="options: users, optionsText: 'fname', optionsValue: 'id', value: selectedUser, visible: userTypeSelected"></select>
    <br />
    <label>Message Text</label>
    <textarea data-bind="value:messageText, visible: userTypeSelected"></textarea><br />
    <button data-bind="click:sendMessage">Send</button>
</div>

JS

    $(document).ready(function () {
        var messageViewModel = function () {

            var self = this;
            self.selectedUser = ko.observable();
            self.userTypeSelected = ko.observable();
            //List of roles
            self.userTypes = [
                { role: 2, type: "Teacher" },
                { role: 3, type: "Parent" }
            ];

            self.messageText = ko.observable();

            self.users = ko.observableArray();

            self.userTypeChanged = function () {
                var role = self.userTypeSelected();
                if (role === 2) {
                    $.ajax(
                    {
                        url: "/api/MessageApi/GetTeachers/" + role,
                        type: 'get',
                        contentType: 'application/json',
                        success: function (data) {
                            self.users(data);
                        },
                        fail: function () {
                            alert("Error occurred while sending data");
                        }
                    });
                }
            };

            self.sendMessage = function () {
                alert("You clicked me!");//added this for testing whether the code works or not
            }
        }

        ko.applyBindings(new messageViewModel());
    });