-1

对于一个简单的 test.html，敲除组件在我的简单 test.html 中工作正常，我的意思是它成功执行视图模型并附加模板，但在巨大的 index.html 中不起作用。有人有想法吗？

文件 test.html：

  <html>   
    <body> 
    <div id="mandiv" class data-bind="component: 'user' "> </div>
    <script type='text/javascript' src='./js/knockout-3.4.0.js'></script>
    <script type="text/javascript" src="app.js"></script> 
  </body>  
  </html>

文件 app.js：

var userModel = function() {
         console.log("I inside model");
        firstname = ko.observable("aaa");
        lastname = ko.observable("bb");
        console.log("firstname: " + firstname());
        console.log("test");
        this.fullname = ko.pureComputed(function(){

            return firstname() + " "  + lastname();   
        }); 

};

console.log("I out here");

ko.components.register('user', {
    viewModel: userModel,
    template : '<p> <input type="text" placeholder="first name" data-bind="value:firstname"> </p> ' +    ' <p> <input type="text" placeholder="last name" data-bind="value:lastname"> </p>' + '<p> full name :  <span data-bind="text: fullname"> </span> </p> </div>'


});

ko.applyBindings();

它在 test.html 上运行良好。
在更大的 index.html 中，我做了同样的事情。但它不起作用。它没有执行 viewModel 并且无法附加模板。由于我的 index.html 太长，我只是复制了相关代码。

index.html 相关代码：

 <div id="mandiv" class="hidden" data-bind="component: 'user' "> 
 </div>

此 div 之前和此 div 之后是单独的 div。并在任何 js 文件之前包含 knockout.js 和 app.js。这没用。有任何想法吗？赞赏！

4

1 回答 1

0

一方面，我会开始使用 var self = this; 然后将所有属性附加到您的 viewModel 中的 self 。

userModel = function() {
    var self = this;

    self.firstname = ko.observable("aaa");
    self.lastname = ko.observable("bb");
    self.fullname = ko.pureComputed(function(){
        return self.firstname() + " "  + self.lastname();   
    });

    return self;
};

第二，创建viewModel的新实例而不是多次使用同一个实例？

ko.components.register('user', {
  viewModel: {
    createViewModel: function(params, componentInfo) { 
      return new userModel();
    }
  },
  template : '<p> <input type="text" placeholder="first name" data-bind="value:firstname"> </p> ' +    ' <p> <input type="text" placeholder="last name" data-bind="value:lastname"> </p>' + '<p> full name :  <span data-bind="text: fullname"> </span> </p> </div>'
});
于 2017-06-30T12:26:17.270 回答