Question

即使这是主要问题，即使多次尝试，我也无法解决这个问题。（但我是这个领域的新手）

我需要的是我有2个单独的java脚本文件，我想从它们绑定。

     <table style="width: 100%;">
            <tr>
                 <td class="auto-style1">Time For Work: </td> 
                 <td><input id="Text2" type="text" data-bind="value: TimeForWork" /></td> 
            </tr>
            <tr>
                 <td class="auto-style1">Rest </td> 
                 <td><input id="Text4" type="text" data-bind="value: Rest" /></td> 
            </tr>
     <td class="auto-style1">Project Code </td> 
                 <td ><select id="Select1" data-bind='options: Projects' style="width: 312px"></select>
                       <button data-bind="click: AddProjects">Cancel</button>
                 </td> 
                 <td><input id="Text6" type="text" data-bind="value:Test" />
      </table>

  <script src="Scripts/TimeRecord.js"></script>
  <script src="Scripts/ProjectDetail.js"></script>

我的java脚本： TimeRecord.js

var ViewModel = {
    CheckIn: ko.observable(),
    CheckOut: ko.observable(),
    Lunch: ko.observable(),
    Rest: ko.observable(),
    WorkOnProject: ko.observable(),
    //Projects: ko.observableArray()
};


ViewModel.TimeForWork = ko.dependentObservable(function () {
    return ViewModel.CheckIn() ? ViewModel.CheckOut() ? parseFloat(this.Lunch()) ? parseFloat(this.CheckOut()) - parseFloat(this.CheckIn()) - parseFloat(this.Lunch()) : parseFloat(this.CheckOut()) - parseFloat(this.CheckIn()) : 0 : 0;
}, ViewModel);

ViewModel.RemainHour = ko.dependentObservable(function () {
    return ViewModel.TimeForWork() ? ViewModel.Rest() ? ViewModel.WorkOnProject() ? parseFloat(this.TimeForWork()) - parseFloat(this.Rest()) - parseFloat(this.WorkOnProject()) : parseFloat(this.TimeForWork()) - parseFloat(this.Rest()) : parseFloat(this.TimeForWork()) : 0
}, ViewModel);

ProjectDetail.js

var projectLine = function () {
    var self = this;
    //self.RemainHour = ko.observable();
    self.Test = "abc";
    self.Projects = ko.observableArray();

    self.AddProjects = function () {
        alert('abc');
    }
}
ko.applyBindings(new projectLine());

这里的TimeRecord.js值是我预期的绑定。但ProjectDetail值不具有约束力。甚至是self.Test值不显示。我做错了什么？

Answer 1

ko.applyBindings每个部分只能调用一次。如果未传递第二个参数，则该部分是整个页面。

这样做。

<div id="one">
  <input data-bind="value: name" />
</div>

<div id="two">
  <input data-bind="value: name" />
</div>

<script type="text/javascript">
  var viewModelA = {
     name: ko.observable("Anurag")
  };

  var viewModelB = {
     name: ko.observable("Chaurasia")
  };

  ko.applyBindings(viewModelA, document.getElementById("one"));
  ko.applyBindings(viewModelB, document.getElementById("two"));
</script>

这可能对你有帮助。

Answer 2

在这种情况下，可以创建另一个View模型，并使用该视图模型可以访问其他视图模型函数。

var ModelHome={
    TimeRecord:ViewModel ,
    Project :projectLine ,

};

ko.applyBindings(ModelHome);

如何使用knockoutjs绑定html中多个javascript文件中的元素

2 个答案: