ViewModel 上的 Knockoutjs 绑定输入

Question

I have a knockout.js ViewModel named CreateVM contains other ViewModel - FrmAddGoodsVM. The problem is when I binding some input into FrmAddGoodsVM, the input will show [object HTMLInputElement]. Can someone show me what I've missed?

I've put these input bindings from FrmAddGoodsVM to CreateVM and it worked fine. But I want to bind them from FrmAddGoodsVM and don't know why it does not work.

index.js

function FrmAddGoodsVM() {
    let self = this; 
    self.frmName = ko.observable(null);
    self.frmAddress = ko.observable(null);
}

function CreateVM() {
    let self = this;
    ...
    self.FrmAddGoodsVM = new FrmAddGoodsVM();
}

$(document).ready(function() {
    let createVM = new CreateVM();
    ko.applyBindings(createVM, document.getElementById('create'))
})

index.html

<form role="form">
    <input id="frmName" data-bind="value: frmName"/>
    <input id="frmName" data-bind="value: frmAddress"/>
</form>

Expected output: The input elements will not have value [object HTMLInputElement]

Answer 1

I'm not really sure what's happening, but you're basically off by one on your object nesting. Create VM has a property that is the real VM. So you just need to adjust your binding and Tada!

 function FrmAddGoodsVM() { let self = this; self.frmName = ko.observable(""); self.frmAddress = ko.observable(""); } function CreateVM() { let self = this; self.FrmAddGoodsVM = new FrmAddGoodsVM(); } let createVM = new CreateVM(); ko.applyBindings(createVM.FrmAddGoodsVM)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <form role="form"> <input id="frmName" data-bind="value: frmName"/> <input id="frmName" data-bind="value: frmAddress"/> </form>

On a side note, bringing jquery in for one single feature is pretty wasteful, especially when knockout is just fine loading at the end of the dom, or you could just use the vanilla version, OnContentReady .