0

我的 select 元素的 foreach 绑定遇到了一些问题。我之前有它工作过，不知道为什么它停止工作，尝试了很多不同的方法似乎没有任何效果。

这些是我的 js 文件中的相关项目：

数据模型js文件：

function ProviderModel(data) {
var self = this;

var defaultValue = '';

var firstName = defaultValue;
var lastName = defaultValue;
var salutation = defaultValue;

if (data != undefined) {
    firstName = data.FirstName;
    lastName = data.LastName;
    salutation = data.Salutation;
}

self.FirstName = ko.observable(firstName);
self.LastName = ko.observable(lastName);
self.Salutation = ko.observable(salutation);

self.formattedFullName = ko.computed(function () {
    return self.LastName() + ", " + self.FirstName() + " " + self.Salutation();
});
}

function PracticeModel(data) {
var self = this;

var defaultValue = '';

var street = defaultValue;
var street2 = defaultValue;
var city = defaultValue;
var state = defaultValue;
var postalCode = defaultValue;
var phone = defaultValue;
var taxId = defaultValue;


if (data != undefined) {
    street = data.Street;
    street2 = data.Street2;
    city = data.City;
    state = data.State;
    postalCode = data.PostalCode;
    phone = data.Phone;
    taxId = data.TaxId;
}

self.Street = ko.observable(street);
self.Street2 = ko.observable(street2);
self.City = ko.observable(city);
self.State = ko.observable(state);
self.PostalCode = ko.observable(postalCode);
self.Phone = ko.observable(phone);
self.TaxId = ko.observable(taxId);

self.displayPhone = ko.computed(function () {
    return "Phone #: " + format10DigitPhoneNumberByText(self.Phone());
});

self.displayTaxId = ko.computed(function () {
    return "Tax ID: " + self.TaxId();
});


self.formattedFullAddress = ko.computed(function () {
    return self.Street() + " " +
           self.Street2() + " " +
           self.City() + " " +
           self.State() + " " +
           self.PostalCode();
});
}

function ContactModel(data) {
var self = this;

var defaultValue = '';

var firstName = defaultValue;
var lastName = defaultValue;
var contactType = 0;
var otherContactTitle = defaultValue;
var contactTitles = [];

if (data != undefined) {
    firstName = data.FirstName;
    lastName = data.LastName;
    contactTitles = data.Titles;
    contactType = data.ContactType;
    otherContactTitle = data.OtherContactTitle;
}

self.FirstName = ko.observable(firstName);
self.LastName = ko.observable(lastName);
self.Titles = ko.observableArray(contactTitles);
self.ContactType = ko.observable(contactType);
self.OtherContactTitle = ko.observable(otherContactTitle);

self.BoxStyle = ko.computed(function () {
    if (self.FirstName() != "" && self.LastName() != "") {
        return "contactBoxSelected";
    }
    return "contactBoxUnselected";
});

}

这是 ViewModel js 文件：

function ProviderDetailsViewModel() {
var self = this;

self.Provider = ko.observable(new ProviderModel());
self.Practice = ko.observable(new PracticeModel());
self.Contact = ko.observable(new ContactModel());

self.DisplayOtherContactTextBox = ko.observable(false);

self.DataPopulated = ko.observable(false);

//subscriptions
self.Contact().ContactType.subscribe(function (newValue) {
    var result = Enumerable.From(self.Contact().Titles()).First(function (x) {
        if (x.Text() == "Other") { return x; }
        else { return null; }
    }).Value();

    if (result === newValue) {
        self.DisplayOtherContactTextBox(true);
    } else {
        self.Contact().OtherContactTitle('');
        self.DisplayOtherContactTextBox(false);
    }
}, self);

} //ProviderDetailsViewModel End

这是我的单页应用程序 js 文件，我在其中应用绑定并进行页面加载

var spa = {
viewModels: {
    providerDetails: new ProviderDetailsViewModel(),
    patientSearch: new PatientSearchViewModel()
}
};


$(document).ready(function () {
$.getJSON('/Cardiology/NewRequest/ProviderDetails', function (response) {
    ko.mapping.fromJS(response, {}, spa.viewModels.providerDetails);
    spa.viewModels.providerDetails.DataPopulated(true);
});

ko.applyBindings(spa.viewModels.providerDetails);
});

从我的 asp.net MVC 控制器返回的示例 json：

{
"Provider":
{
"FirstName":"Bat",
"LastName":"Man",
"Salutation":"MD"
},
"Practice":
{
"Street":"19999 Batcave",
"Street2":null,
"City":"Cincinnati",
"State":"OH",
"PostalCode":"98122",
"Phone":"9999999999",
"TaxId":"45-77777777"
},
"Contact":
{
"FirstName":"Bat",
"LastName":"Man",
"Titles":
[
      {"Selected":false,"Text":null,"Value":null},
      {"Selected":false,"Text":"RN","Value":"725060000"},
  {"Selected":false,"Text":"MD","Value":"725060001"},
  {"Selected":false,"Text":"Physician's Assistant","Value":"725060002"},
  {"Selected":false,"Text":"Medical Assistant","Value":"725060003"},
  {"Selected":false,"Text":"Pharmacist","Value":"725060004"},
  {"Selected":false,"Text":"Office Staff","Value":"725060005"},
  {"Selected":false,"Text":"Office Manager","Value":"725060006"},
  {"Selected":false,"Text":"Billing Personnel","Value":"725060007"},
  {"Selected":false,"Text":"Finance Personnel","Value":"725060008"},
  {"Selected":false,"Text":"Claims Personnel","Value":"725060009"},
  {"Selected":false,"Text":"Receptionist","Value":"725060010"},
  {"Selected":false,"Text":"Other","Value":"725060011"}
]}  
}

这是我的标记：

<section id="ProviderDetails" data-bind="with: spa.viewModels.providerDetails">
<table class="newRequestInnerTable2" width="100%" cellpadding="5" data-bind="visible: DataPopulated">
    <tr>
        <td width="120px" align="left">*Provider:</td>
        <td>
            <div id="selectedProvider">
                <table width=100% height="75">
                    <tr>
                        <td>
                            <div class="searchSelectedBox">
                                <span data-bind="text: Provider().formattedFullName"></span><br />
                                <span style="font-size: 12px;" data-bind="text: Practice().formattedFullAddress"></span><br />
                                <span textType="phoneNumber10" data-bind="text: Practice().displayPhone"></span><br />
                                <span style="font-size: 12px;" data-bind="text: Practice().displayTaxId"></span>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
    <td width="120px" align="left">*Contact:</td>
    <td data-bind="with: Contact">
        <div id="contactInfo" data-bind="css: BoxStyle">
            <table width="100%"> 
                <tr>
                    <td class="tdl">Contact First Name: </td>
                    <td  class="tdr">
                        <input id="ContactFirstName" type="text" data-bind="value: FirstName"/>
                    </td>

                    <td class="tdl">Contact Last Name: </td>
                    <td  class="tdr">
                        <input id="ContactLastName" type="text" data-bind="value: LastName"/>
                    </td>
                </tr>
                <tr>
                    <td class="tdl">Title/Position: </td>
                    <td colspan="3" class="tdr">
                        <select data-bind="foreach: Titles, value: ContactType">
                            <option data-bind="value: Value, text: Text"></option>
                        </select>
                        <input id="otherContactTitle" type="text" data-bind="visible: $parent.DisplayOtherContactTextBox, value: OtherContactTitle"/>
                    </td>
                </tr>
            </table>
            @*<p data-bind="text: ko.toJSON($data.Titles, null, 2)"></p>
            <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>*@
        </div>
    </td>
</table>
</section>
<style type="text/css">
.tdl {text-align: right}
.tdr { text-align: left;padding-left: 4px;}
.tdr input { width: 175px;}
</style>

我有一个非常简单的例子，我用这些数据做的，它正在工作，我无法弄清楚这里缺少什么。我真的需要“第二”双眼睛。

当我在 'spa.viewModels.providerDetails.Contact().Titles()' 上使用 firebug 时，它完全填充了适当的数据。页面上的所有其他数据都在显示，所以我知道我正在连接

非常感谢。

4

1 回答 1

0

感谢 Jason Haley 指出我使用错误绑定的愚蠢时刻。

答案是：

我会用选项替换foreach：标题，optionsValue：'Value'，optionsText：'Text'。查看此页面上的示例 3：knockoutjs.com/documentation/options-binding.html – Jason Haley

于 2013-03-26T01:40:13.513 回答