Knockoutjs将observableArray绑定到byte

时间:2013-09-06 21:35:57

标签: javascript asp.net-mvc-4 knockout.js asp.net-web-api

我正在尝试将一个值数组从一个复选框列表绑定到一个属性类型为byte的模型。因此,我从复选框选项中返回{“1”,“2”,“3”}我需要这个字节格式才能到达我的模型,因此它可以正确传递给我的模型。 属性字节{get;组; }

我的Knockout Viewmodel self.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控制器方法,它没有DaysList

的值
    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>
         }

Knockout方面很好,它返回我想要的但我无法将其转换为字节。 谢谢你的时间!

1 个答案:

答案 0 :(得分:0)

我想要做的是尝试将knockout observable数组转换为字节,然后再传递给服务器以满足参数类型(小int)。相反,我所做的是创建一个“占位符”(字符串数组)属性并将其转换为一个字节以满足我的数据属性。

我只是希望使用javascript删除附加步骤。