ViewModel 上的 Knockoutjs 绑定输入

Question

我有一个名为 CreateVM 的 knockout.js ViewModel 包含其他 ViewModel - FrmAddGoodsVM。问题是当我将一些输入绑定到 FrmAddGoodsVM 时，输入将显示 [object HTMLInputElement]。有人可以告诉我我错过了什么吗？

我已将这些输入绑定从 FrmAddGoodsVM 放到 CreateVM 中，并且运行良好。但是我想从FrmAddGoodsVM绑定他们不知道为什么不行

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>

预期输出：输入元素将没有值 [object HTMLInputElement]

Answer 1

我不太确定发生了什么，但您基本上在对象嵌套上偏离了一个。 Create VM 有一个属性是真正的 VM。所以你只需要调整你的绑定和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>

附带一提，将 jquery 引入一个单一的功能是相当浪费的，尤其是在 dom 末尾可以很好地加载 knockout 时，或者你可以只使用 vanilla版本，OnContentReady.

ViewModel 上的 Knockoutjs 绑定输入

Knockoutjs binding input on ViewModel

javascript

knockout.js