Question

Knockout JS的新手，想知道如何定义viewmodel并提前绑定多个硬编码输入文本

更新：最后制定了解决方案

我无法使用Rahul提供的答案的原因是HTML输入必须是预定义/硬编码的。我知道这与淘汰js的性质有关，但是，这个数据输入屏幕的目的是让患者输入他们的联系信息，所以依靠用户在飞行中添加联系人类型是不可靠的。

var AddressDetailModel = function (FName, LName) {
    var self = this;
    self.FName = ko.observable(typeof (FName) != "undefined" ? FName : "");
    self.LName = ko.observable(typeof (LName) != "undefined" ? LName : "");
}
var EnrolViewModel = function () {
    var self = this;
    self.AddressDetails = ko.observable({
        "Mother/Carer": new AddressDetailModel(),
        "Contact 1": new AddressDetailModel()
    });
}
var VM = new EnrolViewModel();
ko.applyBindings(VM);

.JSON {width:95%; margin: 15px auto 15px auto}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/united/bootstrap.min.css">
<fieldset id="CD">
    <legend><strong>PERSONAL DETAILS</strong></legend>
        <label class="col-sm-2 control-label" for="MFName">First Name</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="MFName" id="MFName" data-bind="value: AddressDetails()['Mother/Carer'].FName"/>
        </div>
        <label class="col-sm-2 control-label" for="MLName">Last Name</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="MLName" id="MLName" data-bind="value: AddressDetails()['Mother/Carer'].LName"/>
        </div>
</fieldset>
<br>
<fieldset id="CT1">
    <legend><strong>CONTACTS 1</strong></legend>
        <label class="col-sm-2 control-label" for="C1FName">First Name</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="C1FName" id="C1FName" data-bind="value: AddressDetails()['Contact 1'].FName"/>
        </div>
        <label class="col-sm-2 control-label" for="C1LName">Last Name</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="C1LName" id="C1LName" data-bind="value: AddressDetails()['Contact 1'].LName"/>
        </div>
</fieldset>
<br>
<fieldset>
    <legend><strong>ViewModel JSON:</strong></legend>
    <div class="JSON" data-bind="text: ko.toJSON(VM)"></div>
</fieldset>

Answer 1

为什么不在为ContactDetails创建模型并在点击添加后推送observableArray中的数据时开始。

我假设你想要动态添加联系人..

以下是我为您构建的示例。这是非常基础的，我鼓励你去探索和学习自己的东西。我只想给你一个抬头： - ）

var ContactDetailsModel = function(item){
    var self = this;
    self.type = ko.observable(typeof(item) != "undefined" ? item.type : "");
    self.name = ko.observable(typeof(item) != "undefined" ? item.name : "");
    self.phone = ko.observable(typeof(item) != "undefined" ? item.phone : "");
};
var viewModel = function(){
    var self = this;
    self.ContactDetails = ko.observableArray();
    self.contactForm = ko.observable(new ContactDetailsModel());
    self.add = function(item){
        console.log(ko.toJSON(item))
        self.ContactDetails.push(item);
    self.contactForm(new ContactDetailsModel());
    };
};

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    
    <h4>KO starts here </h4>
<div data-bind="with: contactForm">
    <input type="text" data-bind="value : type" placeholder="Enter Type"/>
    <input type="text" class="form-control" name="MName" data-bind="value : name" placeholder="Enter Name " />
     <input type="text" class="form-control" name="MPhone" data-bind="value : phone" placeholder="Enter Phone"/>
    <button data-bind="click:$parent.add">Add</button>
</div>

<h3>Output </h3>
<pre data-bind="text: ko.toJSON(ContactDetails, 4, 2)"></pre>

Knockout js - 双向绑定多个输入（硬编码HTML输入文本框）并获取JSON数组

1 个答案: