2017-08-16 154 views
0

我正试图在准备好的文档上预先清除一个淘汰组件。如何访问Knockout组件中的viewModel?

我已经写了下面的代码:

function Finding(id, trigger) { 
    var self = this; 
    self.id = ko.observable(id); 
    self.trigger = ko.observable(trigger); 
} 

function FindingViewModel() { 
    let self = this; 

    self.findings = ko.observableArray(); 

    self.addFinding = function() { 
     self.findings.push(new Finding(self.findings().length + 1, "")); 
    }; 
    self.removeFinding = function (finding) { 
     self.findings.remove(finding); 
     ko.utils.arrayForEach(self.findings(), function (value, i) { 
      self.findings.replace(value, new Finding(i + 1, value.trigger())); 
     }); 
    }; 
    self.update = function (data) { 
     var findings = data.findings; 
     for (var index = 0; index < findings.length; ++index) { 
      var finding = findings[index]; 
      self.findings.push(new Finding(self.findings().length + 1, finding.trigger)); 
     } 

    }; 
} 

ko.components.register('finding', { 
    template: `<table> 
      <tbody data-bind="foreach: findings"> 
      <tr> 
      <td><span data-bind="text: id"/></td> 
      <td><input data-bind="value: trigger"/></td> 
      <td><a href="#" data-bind="click: $parent.removeFinding">Remove</a></td> 
      </tr></tbody></table> 
      <button data-bind="click: addFinding">Add a Finding</button>`, 

    viewModel: FindingViewModel 

}); 

$(function() { 
    ko.applyBindings(); 
    $.getJSON("/_get_findings", function (data) { 
     //findingModel.update(data); 
    }) 
}); 

我怎样才能从发现组件从功能的getJSON设置里面的数据访问底层视图模型?

+1

什么你所期望的,如果组件使用了网页上多次发生的呢?乍一看,在视图模型构造函数中调用'$ .getJSON'调用似乎更有意义,并且每个组件实例执行一次。 – Jeroen

+0

这是一个好主意,我会尝试! Thx –

+0

太棒了!有效。非常感谢你! BRJörn –

回答

1

THX到的Jeroen的解决方案是这样的:

function FindingViewModel() { 
    let self = this; 

    self.findings = ko.observableArray(); 


    self.addFinding = function() { 
     self.findings.push(new Finding(self.findings().length + 1, "")); 
    }; 

    self.removeFinding = function (finding) { 
     self.findings.remove(finding); 
     ko.utils.arrayForEach(self.findings(), function (value, i) { 
      self.findings.replace(value, new Finding(i + 1, value.trigger())); 
     }); 
    }; 

    self.update = function (data) { 
     let findings = data.findings; 
     for (let index = 0; index < findings.length; ++index) { 
      let finding = findings[index]; 
      self.findings.push(new Finding(self.findings().length + 1, finding.trigger)); 
     } 

    }; 

    $.getJSON("/_get_findings", function (data) { 
     self.update(data); 
    }); 
} 
+0

很高兴看到它的工作。尽管如此,你似乎在你发布的确切答案中有一些语法错误。 – Jeroen

相关问题