Knockoutjs 将一个 observableArray 绑定到字节

Knockoutjs bind an observableArray to byte

本文关键字:一个 observableArray 绑定 到字节 Knockoutjs      更新时间:2023-09-26

我正在尝试将复选框列表中的值数组绑定到属性类型为字节的模型。所以我从复选框选择中返回 {"1"、"2"、"3"} 我需要它在到达我的模型之前以字节格式使用它,以便它可以正确传递给我的模型。属性字节 { get; set; }

我的淘汰视图模型在哪里自我。DaysList = ko.observableArray();是我的复选框列表属性。

function ScheduledCommand() {
    //data
    var self = this;
    // An observable is a “JavaScript object that can notify subscribers about changes.” 
    // When the contents of an observable change, the view is automatically updated to match.
    self.ScheduledCommandId = ko.observable();
    self.NextOccurence = ko.observable();
    self.CommandType = ko.observable();
    self.CommandAssembly = ko.observable();
    self.IntervalAmount = ko.observable();
    self.IntervalType = ko.observable();
    self.Catchup = ko.observable();
    self.Retry = ko.observable();
    self.SendToQueue = ko.observable();
    self.Enabled = ko.observable();
    self.SelectedCommand = ko.observable();
    self.DaysList = ko.observableArray();
    var Command = {
        ScheduledCommandId: self.ScheduledCommandId,
        NextOccurence: self.NextOccurence,
        CommandType: self.CommandType,
        CommandAssembly: self.CommandAssembly,
        IntervalAmount: self.IntervalAmount,
        IntervalType: self.IntervalType,
        Catchup: self.Catchup,
        Retry: self.Retry,
        SendToQueue: self.SendToQueue,
        Enabled: self.Enabled,
        SelectedCommand: ko.observable(),
        DaysList: ko.observableArray(),
    };
    self.Command = ko.observable();
    self.Commands = ko.observableArray();
    self.get = function () {
        $.ajax({
            url: '/api/Values',
            cache: false,
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            data: {},
            success: function (data) {
                self.Commands(data); //Put the response in ObservableArray
                $("#btnGetCommands").hide();
                $("#commandlist").show();
                $("#btnHideCommands").show();
            }
        });
    }
    self.hidecommands = function ()
    {
        $("#btnGetCommands").show();
        $("#btnHideCommands").hide();
        $("#commandlist").hide();
    }
    //ko.bindingHandlers.bootstrapPopover = {
    //    init: function (element, valueAccessor, allBindingsAccessor, Command) {
    //        var options = valueAccessor();
    //        var defaultOptions = {};
    //        options = $.extend(true, {}, defaultOptions, options);
    //        $(element).popover(options);
    //    }
    //};
    self.create = function (formElement) {
        if (Command.NextOccurence() != "" && Command.CommandType() != "" && Command.CommandAssembly() != "") {
            $.ajax({
                url: '/api/Values',
                cache: false,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: ko.toJSON(Command),
                success: function (data) {
                    // alert('added');
                    self.Commands.push(data);
                    self.DaysList("");
                    self.NextOccurence("");
                    self.CommandType("");
                    self.CommandAssembly("");
                    self.IntervalAmount("");
                    self.IntervalType("");
                    self.Catchup("");
                    self.Retry("");
                    self.SendToQueue("");
                    self.Enabled("");
                    alert("Command " + self.CommandType() + " successfully created.")
                }
            }).fail(
                     function (xhr, textStatus, err) {
                         alert(err);
                     });
        }
        else {
            alert('Please Enter All the Values !!');
        }
    },
        self.selectCommand = function (command) {
            self.SelectedCommand(command.ScheduledCommandId)
            alert(command.ScheduledCommandId);
        },
    document.getElementById("btnGetCommands").onclick
}
$(document).ready(function () {
    // When the DOM is fulled loaded, call the ko.applyBindings function and pass 
    // in a new instance of the commandViewModel:
    $("#btnHideCommands").hide();
    $("#commandlist").hide();
    ko.applyBindings(new ScheduledCommand());
    // The ko.applyBindings method activates Knockout and wires up the view-model to the view.
});

我的 API 控制器方法,这对天列表没有值

    public HttpResponseMessage Post(ScheduledCommand model)
    {
        repo.Add(model);
        var response = Request.CreateResponse<ScheduledCommand>(HttpStatusCode.Created, model);
        string uri = Url.Link("DefaultApi", new { id = model.ScheduledCommandId });
        response.Headers.Location = new Uri(uri);
        return response;
    }

最后是我的复选框列表。

         @foreach (var item in ViewData["checklist"] as IEnumerable<SelectListItem>)
         { 
            <div class="checkbox">
              <label>
                <input type="checkbox" data-bind="attr: { value: @item.Value}, checked: $root.DaysOfWeek">
                @item.Text
              </label>
            </div>
         }

它的淘汰赛面很好,它返回我想要的东西,但我无法将其转换为字节。谢谢你的时间!

我想做的是在将一个挖空可观察数组传递给服务器之前尝试将其转换为字节,以满足参数类型(小整数)。相反,我所做的是创建一个"占位符"(字符串数组)属性并将其转换为字节以满足我的数据属性。

我只是希望使用javascript删除额外的步骤。