如何将函数添加到映射对象？

Question

我从服务器中获取一个对象数组，我想要添加一个方法。在下面的示例中，我希望它被称为doAlert。当我尝试使用data-bind =“click：doAlert”敲除时绑定到doAlert时，抛出异常。我怀疑我添加了错误的功能，所以任何建议将不胜感激。由于

$(document).ready(function() { 
    var url = GetUrl(); 
    $.getJSON(url, function (data) { 

     var mapping = { 
      doAlert: function (options) { 
       alert('test');  
      } 
     } 

     var viewModel = ko.mapping.fromJS(data, mapping); 
     ko.applyBindings(viewModel); 
    }); 
}); 


<ul data-bind="foreach: $data"> 
<li> 
    <span data-bind="text: Title"></span> 
    <div class="btn-group" style="display:inline"> 
     <a class="btn-small btn dropdown-toggle" data-toggle="dropdown" href="#">Action 
        <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <a data-bind="click: doAlert"><li>Edit</li></a> 
      <a><li>Delete</li></a> 
     </ul> 
    </div> 
</li> 

Answer 1

结帐这个JsFiddle Demo

我更改演示您的视图模型点点，但您的HTML保持不变。

您需要在映射中定义一个create函数。

// Fake Data for demonstration 
var fakeData = [{ 
    "id": 1, 
    "Title": "C++"}, 
{ 
    "id": 2, 
    "Title": "Java"}, 
{ 
    "id": 3, 
    "Title": "JavaScript"}, 
{ 
    "id": 4, 
    "Title": "Scala"}, 
{ 
    "id": 5, 
    "Title": "Python"} 
]; 


function Model() { 

var self = this; 

// You are using foreach syntax so we need to define an observableArray 
this.dataArray = ko.observableArray([]); 

this.loadData = function() { 
    $.ajax({ 
     type: 'POST', 
     url: '/echo/json/', 
     data: { 
      json: ko.toJSON(fakeData) 
     }, 
     success: function(data) { 

      var mapping = { 

       create: function(options) {     
        options.data.doAlert = function() { 
         alert(options.data.Title); 
        } 
        return options.data; 
       } 
      } 
      // Map returning object into the our dataArray 
      ko.mapping.fromJS(data, mapping, self.dataArray); 
     }, 
     dataType: 'json' 
    }); 
} 
} 
}; 

var viewModel = new Model(); 
ko.applyBindings(viewModel); 
viewModel.loadData();​ 

传递给create函数的选项参数有一些属性。我们可以通过options.data属性来访问我们的数据。在mapping documentation

签出有关选项参数的更多信息