为什么第二个警报仍然显示第一个视图模型 (vm1)？

Question

我有以下代码，我很困惑为什么第二个警报显示第一个视图模型 (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>

Answer 1

它显示第一个 ViewModel (vm1) 只是因为当您应用绑定时，您传递了 vm1 的 viewmodel。

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

此外，来自ko.bindingHandlers 的bindingContext 参数将为您提供您传递给ko.applyBinidngs 的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"}}