javascript - 为什么第二个警报仍显示第一个 View 模型(vm1)？

我有下面的代码，我很困惑为什么第二个警报显示第一个视图模型（vm1）而不是第二个视图模型（vm2）？

<div id="main">
    <div data-bind="testBinding: vm1"></div>
    <div data-bind="testBinding: vm2"></div>
</div>

<script>
    function vm1() {
        this.firstName = "test first name"
    }

    function vm2() {
        this.lastName = 'test last name';
    }

    ko.bindingHandlers.testBinding = {
        init: function(element, valueAccessor, allBindings, viewModel,
              bindingContext) {

              alert(JSON.stringify(bindingContext.$data))
        },
   };

   ko.applyBindings(new vm1(), document.getElementById('main'));
</script>

最佳答案

它仅显示第一个ViewModel（vm1），因为应用绑定时会传递vm1的viewmodel。

ko.applyBindings(new vm1(), document.getElementById('main'));

同样，来自bindingContext的ko.bindingHandlers参数将为您提供传递给ko.applyBinidngs的viewModel。由于您在绑定期间传递了第一个viewmodel，因此您只会获得该信息。

http://knockoutjs.com/documentation/custom-bindings.html

如果要从ko.bindingHandlers获取v1和v2，则可以创建另一个视图模型，并分别为它们创建2个属性。

function vm1() {
    this.firstName = "test first name"
}

function vm2() {
    this.lastName = 'test last name';
}

function viewModel() {
  this.vm1 = new vm1();
  this.vm2 = new vm2();
}

ko.bindingHandlers.testBinding = {
    init: function(element, valueAccessor, allBindings, viewModel,
          bindingContext) {

          alert(JSON.stringify(bindingContext.$data))
    },
};

ko.applyBindings(new viewModel(), document.getElementById('main'));

然后，您将在警报框中获得此结果

{"vm1":{"firstName":"test first name"},"vm2":{"lastName":"test last name"}}