淘汰赛：未从 json 填充下拉列表

Question

我正在 json 中从我的服务器收集属性类型的列表，但我似乎无法填充下拉列表。以下代码包含一些注释掉的硬编码，它们也不起作用。在开发人员工具中创建了正确数量的选项，但未设置文本和值。

敲除代码：

var self;
var propertyTypes;
var NewBuildViewModel = function () {
    self = this;
    self.enteredBlockUprn = ko.observable("");
    self.showForm = ko.observable(false);
    self.PropertyTypes = ko.observableArray([]);
    //var temp = GetHiddenField("sir-property-types");
    var temp1 = ([
        {
            PropertyTypeId: 1,
            Type: "Maisonette"
        },

        {
            PropertyTypeId: 2,
            Type: "House"
        },
        {
            PropertyTypeId: 3,
            Type: "Flat"
        }
    ]);
    ko.mapping.fromJS(temp1, {}, self.PropertyTypes);
    self.selectedPropertyType = ko.observable("");
    self.getNewBuildDetails = function () {
        var enteredUprn = this.enteredBlockUprn();
        if (enteredUprn.length > 0) {
            getNewBuildFromBlockUPRN(enteredUprn);
        }
    };
};

var displayNewBuild = function (data) {
    var json = $.parseJSON(data);
    ko.mapping.fromJS(json, {}, self);
    self.showForm(true);
};

var getNewBuildFromBlockUPRN = function (blockUPRN) {
    var url = GetHiddenField("sir-get-new-build-url").replace("@", blockUPRN);
    var callback = displayNewBuild;
    var errorCallback = errorMessage;
    dataService.getItem1(url, callback, errorCallback);
};

@using Newtonsoft.Json
@model NewBuildBlockViewModel
@{
    ViewBag.Title = "Add/Edit New Build Properties";
    ViewBag.GetNewBuildUrl = "/api/newbuild/@/getnewbuildbyuprn".ToServer();
    var data = JsonConvert.SerializeObject(SessionObjectSir.PropertyTypes);
}
<div id="hiddenFields"
     data-sir-get-new-build-url="@ViewBag.GetNewBuildUrl"
     data-sir-property-types="@JsonConvert.SerializeObject(SessionObjectSir.PropertyTypes)"></div>
<fieldset>
    <legend>@ViewBag.Title</legend>
    <section id="sectionEnterBlockUPRN">
        <div id="divEnterBlockUPRN">
            <div class="container">
                <div class="row">
                    Add/Edit Property for Block UPRN:
                    <input type="text" data-bind="value: enteredBlockUprn" id="EnteredBlockUprn" />
                    <input type="button"
                           data-bind="click: getNewBuildDetails"
                           id="btnAddEdit"
                           class="btn btn-sm btn-primary"
                           value="Add/Edit" />
                </div>
            </div>
        </div>
    </section>
    <section id="sectionEnterNewBuildDetails" data-bind="if: showForm" style="background-color: whitesmoke;" class="container">
        <div id="divEnterNewBuildDetails">
            <h4>Enter New Build</h4>

            <div class="row" style="margin-bottom: 5px;">
                <div class="col-md-2" style="text-align: right"><label for="PropertyTypes">Property Type:</label></div>
                <div class="col-md-4" style="text-align: left">
                    <select data-bind="options: 'PropertyTypes', optionsText: 'Type', optionsValue: 'PropertyTypeId', value: selectedPropertyType, optionsCaption: '<-- Select Property Type -->'"></select>
                </div>
            </div>
            <p><button id="newBuildSave" class="btn btn-xs btn-primary">Save</button></p>
        </div>
    </section>
</fieldset>

@section scripts
{
    @Scripts.Render("~/bundles/sir/addeditnewbuildproperty")
    <script type="text/javascript">
        var newBuildViewModel = new NewBuildViewModel();
        ko.applyBindings(newBuildViewModel);
    </script>
}

那么我该如何解决这个问题？

Answer 1

花了一些时间来挖掘所有这些代码，但错误最终还是暴露了出来。您的 select 绑定绑定到字符串 'PropertyTypes' 而不是绑定到可观察数组 PropertyTypes。您只需删除该绑定目标周围的引号。

<select data-bind="options: PropertyTypes, ...

重现：

var self;
var propertyTypes;
var NewBuildViewModel = function (data) {
    self = this;
    self.enteredBlockUprn = ko.observable("");
    self.showForm = ko.observable(false);
    self.PropertyTypes = ko.observableArray([]);

    var temp1 = ([ { PropertyTypeId: 1, Type: "Maisonette" },  { PropertyTypeId: 2, Type: "House" }, { PropertyTypeId: 3, Type: "Flat" } ]); 
    ko.mapping.fromJS(temp1, {}, self.PropertyTypes);
    self.selectedPropertyType = ko.observable("");
    self.getNewBuildDetails = function () {
        var enteredUprn = this.enteredBlockUprn();
        if (enteredUprn.length > 0) {
            //getNewBuildFromBlockUPRN(enteredUprn);
        }
    };
    
    self.showForm(true); //added for debugging
};

ko.applyBindings(new NewBuildViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<div class="col-md-4" style="text-align: left">
                    <select data-bind="options: PropertyTypes, optionsText: 'Type', optionsValue: 'PropertyTypeId', value: selectedPropertyType, optionsCaption: '<-- Select Property Type -->'"></select>
                </div>
<br/><br/>

<span data-bind="text: ko.toJSON(PropertyTypes)"></span>
<br/><br/>

<span data-bind="text: 'Selected: ' + ko.toJSON(selectedPropertyType)"></span>

淘汰赛：未从 json 填充下拉列表

knockout: dorp down list not populated from json

knockout.js