如何将函数移动到MVVM中的单独文件？

我有以下Kendo UI MVVM。这里的业务功能写在viewModel里面。我们如何将这些功能移到不同的文件中？如何将函数移动到MVVM中的单独文件？

我面临的挑战是由于这些函数中的“this”关键字引用了observable中存在的模型。

视图模型

<script type="text/javascript"> 
    var viewModel = kendo.observable({ 

     // model definition 
     employees: [ 
     { name: "Lijo", age: "28" }, 
     { name: "Binu", age: "33" }, 
     { name: "Kiran", age: "29" } 
     ], 

     personName: "", 
     personAge: "", 

     //Note: Business functions does not access any DOM elements using jquery. 
     //They are referring only the objects in the view model. 

     //business functions (uses "this" keyword - e.g. this.get("employees")) 
     addEmployee: function() { 
      this.get("employees").push({ 
       name: this.get("personName"), 
       age: this.get("personAge") 
      }); 

      this.set("personName", ""); 
      this.set("personAge", ""); 
     }, 

     deleteEmployee: function (e) { 

      //person object is created using "e" 
      var person = e.data; 

      var employees = this.get("employees"); 
      var index = employees.indexOf(person); 
      employees.splice(index, 1); 
     } 

    }); 

</script>

头

<head> 
    <title>MVVM Test</title> 

    <script type="text/javascript" src="lib/kendo/js/jquery.min.js"></script> 
    <script type="text/javascript" src="lib/kendo/js/kendo.web.min.js"></script> 

    <!----Kendo Template--> 
    <script id="row-template" type="text/x-kendo-template"> 
      <tr> 
       <td data-bind="text: name"></td> 
       <td data-bind="text: age"></td> 
       <td><button type="button" data-bind="click: deleteEmployee">Delete</button></td> 
       <td> 
      </tr> 
    </script> 


    <!--MVVM Wiring using Kendo Binding--> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      kendo.bind($("body"), viewModel); 
     }); 

    </script> 

</head>

身体

<body> 
    <table> 
     <thead> 
      <tr> 
       <th> 
        Name 
       </th> 
       <th> 
        Age 
       </th> 
      </tr> 
     </thead> 
     <!--The data-template attribute tells Kendo UI that the employees objects should be formatted using a Kendo UI template. --> 
     <tbody data-template="row-template" data-bind="source: employees"> 
     </tbody> 
    </table> 
    <br /> 
    <br /> 
    <form> 
    <input type="text" name="personName" placeholder="Name" data-bind="value: personName" /><br /> 
    <input type="text" name="personAge" placeholder="Age" data-bind="value: personAge" /><br /> 
    <button type="button" data-bind="click: addEmployee"> 
     Add</button> 
    </form> 
</body>

REF ERENCES

来源

2014-02-20 Lijo

无论你在另一个javascript文件定义，或您kendo.observable功能之外，您只需要将“this”绑定到该函数。

这是未经测试，但第一个可能工作，而第二个肯定会工作！

function externalAddEmployee() { 
    this.get("employees").push({ 
      name: this.get("personName"), 
      age: this.get("personAge")}); 
    this.set("personName", ""); 
    this.set("personAge", "");   
} 

kendo.observable({ 
    // first solution: may not work because the 'this' you want is not properly defined 
    addEmployee: externalAddEmployee.bind(this); 
    // second solution: will work everytime 
    // the 'this' is properly defined, just proxy the call to the function 
    addEmployee: function() { return externalAddEmployee.apply(this, arguments); } 

})

提高第二解决方案，你甚至可以使一个辅助函数：

function proxy(fn) { return function() { return fn.apply(this, arguments); }) 
// and then 
kendo.observable({ 
    addEmployee: proxy(externalAddEmployee) 
})

来源

2014-02-20 12:28:17 djcoin

如何将函数移动到MVVM中的单独文件？

回答

相关问题