将选择列表添加到可编辑网格 Knockout.js

Question

我正在测试Knockout.js 的工作原理，但我正在寻找一种方法来修复我的选择，以便我可以选择我的数组。这是我的代码。

控制器（我得到数组的地方）

ViewBag.FakturaProdukterId = JsonConvert.SerializeObject( new SelectList(db.FakturaProdukters, "Id", "Overskrift"));

脚本

var GiftModel = function (gifts) {
        var self = this;
        self.gifts = ko.observableArray(gifts);

            var Test = @Html.Raw((ViewBag.FakturaProdukterId));

            console.log(Test);


        self.addGift = function () {
            self.gifts.push({
                //default seleceted array value
                Beskrivelse: "",
                Pris: ""
            });
        };

        self.removeGift = function (gift) {
            self.gifts.remove(gift);
        };


//where Id is the value of Array.
    var viewModel = new GiftModel([
                { Id: 0, Beskrivelse: "Tall Hat", Pris: "39.95" },
                { Id: 1, Beskrivelse: "Long Cloak", Pris: "120.00" }
            ]);
            ko.applyBindings(viewModel);

            // Activate jQuery Validation
            $("form").validate({ submitHandler: viewModel.save });</script>

最后我有我的 Cshtml：

`<select data-bind="
                                options: Test,
                                optionsText: Text,
                                value: Value,
                                optionsCaption: 'Choose...'">

                            </select>`

总而言之，我希望数组与选择绑定。如果可能的话，我想使用 Html.helper 提前致谢

编辑： 编辑以拟合给出的答案后，我收到此错误

    Uncaught ReferenceError: Unable to process binding "foreach: function (){return gifts }"
Message: Unable to process binding "options: function (){return gifts }"
Message: gifts is not defined
    at options (eval at parseBindingsString (knockout-3.4.2.js:68), <anonymous>:3:60)
    at update (knockout-3.4.2.js:94)
    at function.a.B.i (knockout-3.4.2.js:73)
    at Function.Uc (knockout-3.4.2.js:52)
    at Function.Vc (knockout-3.4.2.js:51)

Answer 1

首先，您没有绑定正确的变量，其次您的 var Test 不知道会被淘汰。 JS：

var GiftModel = function(gifts) {
    var self = this;

    self.gifts = ko.observableArray(gifts);
    self.selectedGift = ko.observable(@Html.Raw((ViewBag.FakturaProdukterId)));

    self.addGift = function () {
        self.gifts.push({
            //default seleceted array value
            Beskrivelse: "",
            Pris: ""
        });
    };

    self.removeGift = function (gift) {
        self.gifts.remove(gift);
    };

    return self;
}

HTML：

<select data-bind="options: gifts,
                   value: selectedGift,
                   optionsCaption: 'Choose...',
                   optionsText: 'Beskrivelse',
                   optionsValue: 'Id'">
</select>

JSFiddle：https://jsfiddle.net/go715rd1/6/