从Razor填充Knockout的可观察数组

时间:2019-07-18 12:04:46

标签: asp.net-core knockout.js

我正在尝试在ASP.NET中实现错误处理,以便如果出现错误,则用户将收到错误消息,然后可以返回并恢复以前的状态。我正在使用ASP.NET Core和Knockout(不是我的实现)。我想用服务器(Model.SignersJson)中的模型更新“ signerFields”。我该怎么办?

Signer.js

function SignerViewModel() {
    var self = this;
    self.signerFields = ko.observableArray([]);
    self.guarantorFields = ko.observableArray([]);
    self.companyGuarantorFields = ko.observableArray([]);

...

Signer.cshtml

<div data-bind="foreach: signerFields, visible: signerFields().length > 0">
                    <div class="row">
                        <div class="col-lg-10">
                            <div>
                                @*Header Company signers section*@
                                <div class="row" data-bind="visible: isCompany() && !anySigner() && !isInvitation()" style="display: none">
                                    <div class="col-lg-4">
                                        <b>FullName</b>
                                    </div>
                                    @*<div class="col-lg-3">
                                            <b>LastName </b>
                                        </div>*@
                                    <div class="col-lg-4">
                                        <b>Role </b>
                                    </div>
                                    <div class="col-lg-3">
                                        <b>Contact_Information</b>
                                    </div>
                                </div>
                            </div>
                        </div>

                        ...


@section scripts
{
    <script src="~/Scripts/Signer.js"></script>
    var serverSigners = JSON.parse(@Html.Raw(Json.Encode(Model.SignersJson)));
    var observableData = ko.mapping.fromJS(serverSigners);

    var viewModel = new SignerViewModel();
    viewModel.signerFields(observableData); // <-- How?
}

我没有收到任何错误消息,什么也没有。

1 个答案:

答案 0 :(得分:0)

这个问题有很多未知数,但这是一个利用我们掌握的信息的有效示例。我注意到的一件事是,在创建此样本时,我假设来自Razor的数据位于数组中。当数组传递到映射组件时,它作为可观察数组出现。这意味着进入signerFields的数据可能不是您所期望的,并且最终有了一个带一个对象的observableArray本身就是一个可观察数组。将圆括号添加到observableData()意味着您从可观察对象中获取了数据,然后可以将其作为对象数组传递到signerFields中。

希望如此。

function SignerViewModel() {
  var self = this;
  self.signerFields = ko.observableArray([]);
  self.guarantorFields = ko.observableArray([]);
  self.companyGuarantorFields = ko.observableArray([]);
  
}
var serverSigners = [{'fullname':'Test Name', 'lastName': 'Name', 'role': 'Test Role', 'contactInformation': '123 Seasame Street NY, US', 'isCompany': true, 'anySigner': false, 'isInvitation': false}];
var observableData = ko.mapping.fromJS(serverSigners);
var viewModel = new SignerViewModel();

viewModel.signerFields(observableData());


ko.applyBindings(viewModel)
<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 data-bind="foreach: signerFields, visible: signerFields().length > 0">
  <div class="row">
    <div class="col-lg-10">
      <div>
        <div class="row" data-bind="visible: isCompany() && !anySigner() && !isInvitation()">
          <div class="col-lg-4">
            <b>FullName: </b><span data-bind="text: fullname"></span>
          </div>
          <div class="col-lg-3">
            <b>LastName: </b><span data-bind="text: lastName"></span>
          </div>
          <div class="col-lg-4"> 
            <b>Role: </b><span data-bind="text: role"></span>
          </div>
          <div class="col-lg-3">
            <b>Contact Information: </b><span data-bind="text: contactInformation"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>