Question

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

file 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。这是行不通的。有任何想法吗？不胜感激！

Answer 1

首先，我会开始使用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>'
});

knockout组件注册不执行viewModel并且无法附加模板

1 个答案: