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

Question

我有以下代码，但我很困惑为什么第二个警报显示第一个 View 模型 (vm1) 而不是第二个 View 模型 (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) 只是因为当您应用绑定(bind)时，您传递了 vm1 的 View 模型。

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

此外，来自 ko.bindingHandlers 的 bindingContext 参数将获取传递给 ko.applyBinidngs 的 viewModel。由于您在绑定(bind)期间传递了第一个 View 模型，因此您只能获得该信息。

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

如果您想从 ko.bindingHandlers 获取 v1 和 v2，您可以创建另一个 View 模型并为每个 View 模型创建 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":"测试名字"},"vm2":{"lastName":"测试姓氏"}}