多个Knockout绑定功能和变量

时间:2015-12-10 12:27:58

标签: javascript html knockout.js data-binding requirejs

多个Knockout绑定。

我想只使用一个apply绑定而不是两个apply绑定。一个是变量,其他是功能。我也在使用requireJS。

HTML:

<button id= "Hand" name="Hand"
                    data-bind="click: Handler2">
            </button>

KnockoutJS

function (ko, $)
        {                                            
            function DM1ViewModel() {
                var self = this;
                self.bId = ko.observable('TEST456');

            }
            $('#hide').hide();


        var DMD2 = {
        Handler2: function() {

           window.location='http:www.google.com';
        }
    };

           ko.applyBindings(new DM1ViewModel(), document.getElementById('Container'));
           ko.applyBindings(DMD2);
            });

1 个答案:

答案 0 :(得分:1)

目前看来,没有理由在DMD2对象上应用绑定,因为那里没有任何可观察对象。

但是,要更一般地回答您的问题,您有两种选择:

  1. 针对不包含Container元素的元素调用DMD2的applyBindings,并且Container元素中尚未包含该元素。
  2. 使用Javascript:

    // DM1ViewModel is the same
    var DMD2ViewModel = function() {
        this.Handler2 = function() {
            window.location='http:www.google.com';
        };
    }
    ko.applyBindings(new DM1ViewModel(), document.getElementById('DM1Container'));
    ko.applyBindings(new DMD2ViewModel(), document.getElementById('DMD2Container'));
    

    HTML

    <div id="Container">
        <div id="DM1Container">
            <h2 data-bind="text: bId"></h2>
        </div>
        <div id="DMD2Container">
             <h2 data-bind="click: Handler2">Click me</h2>
        </div>
    </div>
    
    1. 制作一个父视图模型,将每个现有视图模型作为可观察对象,然后使用with binding
    2. 使用Javascript:

      var PageViewModel = function(){
          this.dm1 = ko.observable(new DM1ViewModel());
          this.dm2 = ko.observable(DMD2); // currently isn't a function, so can't call new
      }
      
      ko.applyBindings(new PageViewModel(), document.getElementById('Container'));
      

      在你的HTML中:

      <div id="Container">
          <div data-bind="with: dm1">
              <h2 data-bind="text: bId"></h2>
          </div>
          <div data-bind="with: dm2">
               <h2 data-bind="click: Handler2">Click me</h2>
          </div>
      </div>