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

Posted 2023-05-08

【中文标题】将选择列表添加到可编辑网格 Knockout.js

【英文标题】：adding select list to Editable grid Knockout.js

【发布时间】：2017-10-29 16:22:05

【问题描述】：

我正在测试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)

【问题讨论】：

您的绑定显示选项：测试，因此您正在将选择中的选项与 FakturaProdukterId 绑定？此外，您的绑定将不起作用，因为 Test 不是 viewModel 的属性。将 var Test = 更改为 self.Test =

【参考方案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/

【讨论】：

谢谢，有道理，但我仍然收到此错误：查看主题中的编辑，无法在此处插入代码。

忘记在ViewModel中添加返回值，需要：最后返回self。 （固定代码示例）

是的，有道理。仍然得到同样的错误。要我更新主题以更新代码吗？如果这让你更容易？感谢您迄今为止的所有帮助

我为您创建了一个 JSFiddle，您可以在其中查看代码的工作原理。 jsfiddle.net/go715rd1

啊，我想我可能没有正确定义我的问题。我想使用选择列表“FakturaProdukterId”中的“文本”，其中 Value == Id。