1

我从服务器获取了一组对象，我想向其中添加方法。在下面的示例中，我希望它被称为 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>

4

1 回答 1

2

查看这个JsFiddle 演示

我为演示稍微更改了您的 viewModel，但您的 html 保持不变。

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

// 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 属性访问我们的数据。查看映射文档中有关选项参数的更多信息

于 2012-08-30T10:49:26.287 回答